7

我正在寻找一个非常简单的示例，该示例显示将 Knockback 代码连接到通过 RESTful 服务连接的主干模型。我正在使用 ServiceStack|c# 后端。下面的所有链接都太复杂了，并且通过 url 使用 localStore 而不是 RESTful 服务。我也更喜欢在 Javascript 而不是 CoffeeScript 中查看示例。

我的示例 url 类似于localhost/entities，点击它会导致 RESTful web 服务返回所有实体。使用localhost/entity/1访问它会返回 ID 为 1 的实体。

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

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

_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-knockback-js-production-ready

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

提前感谢您提供的任何帮助。顺便说一句，您不希望得到下划线的超链接... ;)

4

2 回答 2

7

在伟大的Knockback项目的 Kevin Malakoff 的大力帮助和支持下，我能够得到一个小例子！我使用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-09T20:09:15.907 回答
1

我整理了一个非常简单的例子。它假设您已经知道如何使用主干和淘汰赛，所以这只是一个快速示例，说明如何将它们一起使用

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

于 2013-02-17T22:49:34.437 回答