El ejemplo más simple de knockback js que trabaja con un servicio web RESTful como ServiceStack?

Estoy buscando un MUY simple ejemplo que muestra el cableado de Knockback code a un modelo de red troncal que se conecta a través de un servicio RESTful. Estoy usando ServiceStack | C# backend. Todos los enlaces a continuación son demasiado complicados y usan localStore en lugar de un servicio RESTful a través de la url. También prefiero ver ejemplos en Javascript y no en CoffeeScript.El ejemplo más simple de knockback js que trabaja con un servicio web RESTful como ServiceStack?

Mi URL de ejemplo es algo así como localhost/entidades donde presionar esto hará que el servicio web RESTful devuelva todas las entidades. Golpeándolo con localhost/entidad/1 volvería a la entidad con un ID de 1.

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

_HTTPS: //github.com/kmalakoff/knockback-reference-app/

_HTTPS: //github.com/addyosmani/todomvc

el siguiente es el ejemplo de tutorial knockback en el primer enlace:

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

Pero no se menciona cómo conectará el modelo de red troncal a su servicio web RESTful.

Hay ejemplos de cómo hacer esto a través de Backbone pero no estoy seguro de cómo cambian las cosas al usar Knockback. No se encontraron

Los siguientes enlaces, pero no es útil:

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

_http: //stackoverflow.com/questions/9704220/es-js-derribo-listo para la producción

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

Gracias de antemano por la asistencia brindada. Por cierto, si no quiere hipervínculos, obtiene guiones bajos ...;)

Fuente

2012-09-06 Scott Idler

se puede utilizar [knockback.js] (http://kmalakoff.github.com/knockback) –

Con la ayuda y el apoyo de Kevin Malakoff del gran proyecto Knockback pude obtener un pequeño ejemplo trabajando! Usé el proyecto ServiceStack Backbone Todos como punto de partida.

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

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

archivo javascript:miaplicacion.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]); });

Fuente

2012-09-09 20:09:15

que arme un ejemplo muy sencillo. Se supone que usted ya sabe cómo utilizar la columna vertebral y la eliminatoria, esto sólo da un ejemplo rápido de la forma en que se pueden utilizar juntos

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

Fuente

2013-02-17 22:49:34 coder

Ahora alojado aquí, parece: https://github.com/jpatrick1/knockback –

enlace de blog actualizado para usted @LayZee – coder

El ejemplo más simple de knockback js que trabaja con un servicio web RESTful como ServiceStack?

Respuesta

Cuestiones relacionadas