击退爵士与RESTful Web服务的工作，如ServiceStack的最简单的例子？ [英] The simplest example of Knockback js working with a RESTful webservice such as ServiceStack?

问题描述

我要寻找一个非常简单的例子，显示了接线击退code到通过RESTful服务连接骨干模式。我使用ServiceStack | C＃后端。所有下面的链接过于复杂，使用localStore，而不是通过URL RESTful服务。我也preFER看到javascript例子不是CoffeeScript的。

我的例子网址是这样的本地主机/实体触及的地方，这将导致RESTful Web服务来回报所有的实体。与打它的本地主机/实体/ 1 将与标识1返回实体。

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

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

_HTTPS：//github.com/addyosmani/todomvc

以下是从第一个链接击退教程中的例子：

 模型，集合，视图模型，和绑定：
//通过CoffeeScript的1.3.3生成
VAR模型，view_model;模型=新Backbone.Model（{
  FIRST_NAME：行星
  姓氏：大地
}）;view_model = kb.viewModel（模型）;view_model.full_name = ko.computed（（函数（）{
  回归+（this.first_name（））++（this.last_name（））;
}），view_model）;ko.applyBindings（view_model，$（'＃kb_view_model_computed'）[0]）;
 

但没有你将如何接线骨干模型到你的RESTful Web服务提及。

有如何通过骨干做到这一点的例子，但我不确定，使用时击退事情如何变化的。

以下链接被发现，但没有帮助：

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

_http：//stackoverflow.com/questions/9704220/is-knockback-js-production-ready

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

在此先感谢提供的任何援助。顺便说一句，你不想让你的超链接下划线得到...;）

解决方案

通过从大击退的项目，我能得到一个小例子努力！我用了<一个href=\"https://github.com/ServiceStack/ServiceStack.Examples/blob/master/src/Backbone.Todos/Global.asax.cs\">ServiceStack骨干托多斯项目作为起点。

C＃文件： 的Global.asax.cs 的

 使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Security;
使用System.Web.SessionState;使用ServiceStack.Redis;
使用ServiceStack.ServiceInterface;
使用ServiceStack.WebHost.Endpoints;命名空间的MyApp
{
    公共类Person
    {
        公众诠释标识{搞定;组; }
        公共字符串名字{获得;组; }
        公共字符串名字{获得;组; }
    }    公共类PersonService：RestServiceBase＆LT;＆人GT;
    {
        公共静态人凯文=新的Person {ID = 1，名字=凯文，姓氏=马拉科夫};
        公共静态人斯科特=新的Person {ID = 2，名字=斯科特，姓氏=闲人};
        公共静态列表＆LT;＆人GT;人=新的List＆LT;＆人GT; {凯文，斯科特};        公众覆盖对象使用onGET（人人）
        {
            如果（person.Id！=默认值（INT））
                返回的人[person.Id-1];
            返回的人;
        }        公众覆盖对象onPOST等（人人）
        {
            返回base.OnPost（人）;
        }        公众覆盖对象OnPut（人人）
        {
            返回onPOST等（人）;
        }        公众覆盖对象OnDelete（人人）
        {
            返回base.OnDelete（人）;
        }
    }    公共类APPHOST：AppHostBase
    {
        公共APPHOST（）：基地（MyApp的的typeof（PersonService）.Assembly）{}        公共覆盖无效配置（Funq.Container容器）
        {
            ServiceStack.Text.JsConfig.EmitCamelCaseNames = TRUE;
            路线
              。新增＆LT;＆人GT;（/人）
              。新增＆LT;＆人GT;（/人/（编号））;
        }
    }    公共类WebApiApplication：System.Web.HttpApplication
    {
        保护无效的Application_Start（对象发件人，EventArgs的发送）
        {
            新APPHOST（）的init（）;
        }
    }
}
 

HTML文件： default.html中的

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
  ＆LT; HEAD＆GT;
    ＆LT;标题＆GT; MyApp2＆LT; /标题＆GT;
    ＆LT;脚本＆GT; window.JSON ||文件撰写（'＆LT;脚本SRC =htt​​p://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js＆GT; \\ X3C / SCRIPT＆GT;'）＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/ jQuery的-1.8.0.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =脚本/击退-全栈0.16.1.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =myapp.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; D​​IV ID =的myapp＆GT;
        ＆LT; D​​IV CLASS =标题＆GT;
            ＆LT; H1＆GT;＆的MyApp LT; / H1＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =内容＆GT;
            ＆LT; D​​IV ID ='kb_observable'＆GT;
                ＆LT; P＆gt;首先名称：其中，输入级=文本数据绑定=值：名字/＆GT;＆LT; / P＆GT;
                ＆LT; P＆GT;姓：＆LT;输入类='输入小右拉式数据绑定=值：名字/＆GT;＆LT; / P＆GT;
                ＆LT; P＆GT;您好，LT＆;跨度数据绑定=TEXT：全名＆GT;＆LT; / SPAN＆GT;＆LT; / P＆GT;！
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV ID =kb_collection_observable＆GT;
                ＆LT; D​​IV数据绑定=如果：人＆GT;
                    ＆LT;跨度＆GT;有者和LT; / SPAN＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV数据绑定=的foreach：人＆GT;
                    ＆LT; P＆gt;首先名称：其中，输入级=文本数据绑定=值：名字/＆GT;＆LT; / P＆GT;
                    ＆LT; P＆GT;姓：＆LT;输入类='输入小右拉式数据绑定=值：名字/＆GT;＆LT; / P＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

JavaScript文件： myapp.js 的

  

$（函数（）{

  //模型
VAR PersonModel = Backbone.Model.extend（{urlRoot：'/ MyApp的/人'}）;
VAR模型=新PersonModel（{ID：1}）;
model.fetch（）;//视图模型
VAR PersonViewModel =功能（人）{    this.firstName = kb.observable（人'的firstName'）;
    this.lastName = kb.observable（人，'姓氏'）;
    this.fullName = ko.computed（（函数（）{
        回归+（this.firstName（））++（this.lastName（））;
    }）， 这个）;
};
VAR personViewModel =新PersonViewModel（模型）;//捆绑
ko.applyBindings（personViewModel，$（'＃kb_observable'）[0]）;//模型
VAR PersonsModel = Backbone.Collection.extend（{模式：PersonModel，网址：'/ MyApp的/人'}）;
VAR personsModel =新PersonsModel（）;
personsModel.fetch（）;//视图模型
VAR PersonsViewModel =功能（人）{
    this.persons = kb.collectionObservable（人）
};
VAR personsViewModel =新PersonsViewModel（personsModel）;//捆绑
ko.applyBindings（personsViewModel，$（'＃kb_collection_observable'）[0]）; }）;
 

I am looking for a VERY simple example that shows wiring up Knockback code to a backbone model that connects via RESTful service. I am using ServiceStack|c# backend. All of the links below are too complicated and use localStore rather than a RESTful service via url. I also prefer to see examples in Javascript not CoffeeScript.

My example url is something like localhost/entities where hitting this will cause the RESTful webservice to return all of the entities. Hitting it with localhost/entity/1 would return the entity with an Id of 1.

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

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

_https://github.com/addyosmani/todomvc

The following is the example from knockback tutorial on the first 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]);

But there is no mention of how you would wire the backbone model up to your RESTful webservice.

There are examples of how do this via Backbone but I am uncertain as to how things change when using Knockback.

The following links were found, but not helpful:

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

_http://stackoverflow.com/questions/9704220/is-knockback-js-production-ready

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

Thanks in advance for any assistance provided. Btw you don't want hyperlinks you get underscores... ;)

解决方案

With much help and support from Kevin Malakoff from the great Knockback project I was able to get a small example working! I used the ServiceStack Backbone Todos project as a starting point.

c# 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();
        }
    }
}

html file: 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 file: 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]); });

这篇关于击退爵士与RESTful Web服务的工作，如ServiceStack的最简单的例子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！