Knockback js與RESTful web服務（如ServiceStack）一起使用的最簡單示例？

我在尋找一個非常簡單的例子，顯示了將Knockback代碼連接到通過RESTful服務連接的骨幹模型。我正在使用ServiceStack | c＃後端。下面的所有鏈接都太複雜，使用localStore而不是通過url的REST風格的服務。我還喜歡在Javascript中看到示例而不是CoffeeScript。Knockback js與RESTful web服務（如ServiceStack）一起使用的最簡單示例？

我的示例url類似於localhost/entities，點擊此按鈕會導致RESTful web服務返回所有實體。與本地主機/實體擊中它/ 1將與1

_http的ID返回實體：//kmalakoff.github.com/knockback/index.html

_HTTPS：//github.com/kmalakoff /擊退參考應用內/

_HTTPS：//github.com/addyosmani/todomvc

以下是從所述第一鏈路上的擊退教程例如：

Models, Collection, ViewModel, and Bindings: 
// Generated by CoffeeScript 1.3.3 
var model, view_model; 

model = new Backbone.Model({ 
    first_name: "Planet", 
    last_name: "Earth" 
}); 

view_model = kb.viewModel(model); 

view_model.full_name = ko.computed((function() { 
    return "" + (this.first_name()) + " " + (this.last_name()); 
}), view_model); 

ko.applyBindings(view_model, $('#kb_view_model_computed')[0]);

但是沒有提到如何將骨幹模型連接到RESTful Web服務。

有些例子是如何通過Backbone來實現的，但我不確定使用Knockback時事物如何改變。

以下鏈接被發現了，但沒有幫助：

_http：//stackoverflow.com/questions/7992431/using-knockoutjs-backbone-together

_http：//stackoverflow.com/questions/9704220/IS-擊退-JS-生產就緒

_http：//stackoverflow.com/questions/10434203/defining-models-on-server-side-when-using-mvvm-with-knockout-js

提前感謝您提供的任何幫助。順便說一句，你不希望超鏈接，你得到的下劃線...;）

來源

2012-09-06 Scott Idler

您可以使用[knockback.js（http://kmalakoff.github.com/knockback） –

從偉大的Knockback項目凱文馬拉科夫的幫助和支持，我得到了一個小例子工作！我以ServiceStack Backbone Todos項目爲起點。

C＃文件：的Global.asax.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Security; 
using System.Web.SessionState; 

using ServiceStack.Redis; 
using ServiceStack.ServiceInterface; 
using ServiceStack.WebHost.Endpoints; 

namespace MyApp 
{ 
    public class Person 
    { 
     public int Id { get; set; } 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
    } 

    public class PersonService : RestServiceBase<Person> 
    { 
     public static Person kevin = new Person { Id = 1, FirstName = "Kevin", LastName = "Malakoff" }; 
     public static Person scott = new Person { Id = 2, FirstName = "Scott", LastName = "Idler" }; 
     public static List<Person> people = new List<Person> { kevin, scott }; 

     public override object OnGet(Person person) 
     { 
      if (person.Id != default(int)) 
       return people[person.Id-1]; 
      return people; 
     } 

     public override object OnPost(Person person) 
     { 
      return base.OnPost(person); 
     } 

     public override object OnPut(Person person) 
     { 
      return OnPost(person); 
     } 

     public override object OnDelete(Person person) 
     { 
      return base.OnDelete(person); 
     } 
    } 

    public class AppHost : AppHostBase 
    { 
     public AppHost() : base("MyApp", typeof(PersonService).Assembly) { } 

     public override void Configure(Funq.Container container) 
     { 
      ServiceStack.Text.JsConfig.EmitCamelCaseNames = true; 
      Routes 
       .Add<Person>("/persons") 
       .Add<Person>("/persons/{Id}"); 
     } 
    } 

    public class WebApiApplication : System.Web.HttpApplication 
    { 
     protected void Application_Start(object sender, EventArgs e) 
     { 
      new AppHost().Init(); 
     } 
    } 
}

HTML文件：default.html中

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>MyApp2</title> 
    <script>window.JSON || document.write('<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js">\x3C/script>')</script> 
    <script src="Scripts/jquery-1.8.0.js" type="text/javascript" ></script> 
    <script src="Scripts/knockback-full-stack-0.16.1.js" type="text/javascript" ></script> 
    <script src="myapp.js" type="text/javascript" ></script> 
    </head> 
<body> 
    <div id="myapp"> 
     <div class="title"> 
      <h1>MyApp</h1> 
     </div> 
     <div class="content"> 
      <div id='kb_observable'> 
       <p>First name: <input class='text' data-bind="value: firstName" /></p> 
       <p>Last name: <input class='input-small pull-right' data-bind="value: lastName" /></p> 
       <p>Hello, <span data-bind="text: fullName"></span>!</p> 
      </div> 
      <div id="kb_collection_observable"> 
       <div data-bind="if: persons"> 
        <span>Has Persons</span> 
       </div> 
       <div data-bind="foreach: persons"> 
        <p>First name: <input class='text' data-bind="value: firstName" /></p> 
        <p>Last name: <input class='input-small pull-right' data-bind="value: lastName" /></p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

JavaScript文件：MYAPP。JS

$（函數（）{

//model 
var PersonModel = Backbone.Model.extend({ urlRoot: '/MyApp/persons' }); 
var model = new PersonModel({ id: 1 }); 
model.fetch(); 

//viewmodel 
var PersonViewModel = function (person) { 

    this.firstName = kb.observable(person, 'firstName'); 
    this.lastName = kb.observable(person, 'lastName'); 
    this.fullName = ko.computed((function() { 
     return "" + (this.firstName()) + " " + (this.lastName()); 
    }), this); 
}; 
var personViewModel = new PersonViewModel(model); 

//binding 
ko.applyBindings(personViewModel, $('#kb_observable')[0]); 

//model 
var PersonsModel = Backbone.Collection.extend({ model: PersonModel, url: '/MyApp/persons' }); 
var personsModel = new PersonsModel(); 
personsModel.fetch(); 

//viewmodel 
var PersonsViewModel = function (persons) { 
    this.persons = kb.collectionObservable(persons) 
}; 
var personsViewModel = new PersonsViewModel(personsModel); 

//binding 
ko.applyBindings(personsViewModel, $('#kb_collection_observable')[0]); });

來源

2012-09-09 20:09:15

我把一個很簡單的例子，它假設你已經知道如何使用骨幹和淘汰賽所以這只是給出了一個簡單的例子他們如何可以一起使用

http://coder2.blogspot.com/2013/02/backbonejs-and-knockoutjs.html

來源

2013-02-17 22:49:34 coder

現在託管在這裏，看起來：https://github.com/jpatrick1/knockback –

爲你更新了博客鏈接@LayZee – coder

Knockback js與RESTful web服務（如ServiceStack）一起使用的最簡單示例？

回答

相關問題