L'esempio più semplice di Knockback js funziona con un webservice RESTful come ServiceStack?

Sto cercando un esempio MOLTO semplice che mostra il cablaggio del codice knockback a un modello backbone che si collega tramite il servizio RESTful. Sto usando ServiceStack | C# backend. Tutti i link sottostanti sono troppo complicati e utilizzano localStore piuttosto che un servizio RESTful tramite l'URL. Preferisco anche vedere esempi in Javascript non CoffeeScript.L'esempio più semplice di Knockback js funziona con un webservice RESTful come ServiceStack?

Il mio URL di esempio è qualcosa come localhost/entità dove il colpire questo causerà al webservice RESTful di restituire tutte le entità. Colpendolo con localhost/entità/1 tornerebbe l'entità con ID 1.

_http: //kmalakoff.github.com/knockback/index.html

_HTTPS: //github.com/kmalakoff/contraccolpo-riferimento-app/

_HTTPS: //github.com/addyosmani/todomvc

il seguente è l'esempio da rinculo tutorial sul primo link:

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]);

Ma non si parla di come si collegherebbe il modello di backbone al proprio webservice RESTful.

Ci sono esempi di come farlo tramite Backbone ma non sono sicuro di come cambino le cose quando si usa Knockback.

I seguenti link sono stati trovati, ma non è utile:

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

_HTTP: //stackoverflow.com/questions/9704220/è-contraccolpo-js-production-ready

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

Grazie in anticipo per qualsiasi assistenza fornita. A proposito, non vuoi che i collegamenti ipertestuali vengano sottolineati ...;)

fonte

2012-09-06 Scott Idler

È possibile utilizzare [knockback.js] (http://kmalakoff.github.com/knockback) –

Con molto aiuto e supporto di Kevin Malakoff dal grande progetto Knockback, sono riuscito a ottenere un piccolo esempio di lavoro! Ho utilizzato il progetto ServiceStack Backbone Todos come punto di partenza.

C# di file: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(); 
     } 
    } 
}

file 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>

file javascript:myapp.js

$ (function() {

//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]); });

fonte

2012-09-09 20:09:15

ho messo insieme un esempio molto semplice. Si presuppone che già sa come usare la spina dorsale e ad eliminazione diretta in modo da questo solo dà un rapido esempio di come possono essere utilizzati insieme

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

fonte

2013-02-17 22:49:34 coder

Ora ospitato qui, sembra: https://github.com/jpatrick1/knockback –

link aggiornato per il tuo blog @LayZee – coder

L'esempio più semplice di Knockback js funziona con un webservice RESTful come ServiceStack?

risposta

Problemi correlati