0

我是 SammyJS 的新手。我正在尝试使用 SammyJS 和 KnockoutJS 创建一个示例应用程序。我正在创建一些运行时 HTML 并添加绑定属性，但淘汰绑定无法使用它。

var priorities = { Low: 0, Important: 1, Medium: 2, High: 3, VeryHigh: 4 };
var mailBoxViewModel = function () {
    var self = this;
    self.heading = 'Learn Sammy JS';
    self.Messages = ko.observableArray([{ Id: 1, Message: 'Hello', Description: '', Sender: { Name: 'Ravi', SentOn: new Date(), Priority: priorities.Low} }, { Id: 2, Message: 'Meeting', Description: '', Sender: { Name: 'Chandar', SentOn: new Date(), Priority: priorities.High}}]);
    var routes = $.sammy(function () {
        this.element_selector = '#content';
        this.before(function () {
            this.swap('');
        });
        this.get("#/Messages", function (context) {
            var div = $("<div class='well'></div>");
            div.append("<h1 data-bind='text:heading'></h1>");
            var table = $("<table class='table' ></table>");
            table.append("<thead><tr><th>Messages</th></tr></thead>");
            table.append("<tbody data-bind='foreach: Messages'><tr><td data-bind='text:Message'></td></tr></tbody>");
            div.append(table);
            context.$element().append(div);
        });
        this.get("#/Sent", function (context) {
            var div = $("<div class='well'></div>");
            var table = $("<table class='table'></table>");
            table.append("<thead><tr><th>Messages</th></tr></thead>");
            table.append("<tbody><tr><td>Hello World</td></tr></tbody>");
            div.append(table);
            context.$element().append(div);
        });
    });
    $(function () {
        routes.run("#/Messages");
    });
};
ko.applyBindings(new mailBoxViewModel());
4

2 回答 2

1

您的问题（正如 Anders 所暗示的）是 Knockout 只能ko.applyBindings为执行时已经在您的 DOM 中的元素创建数据绑定。它对您随后使用 jQuery 添加到 DOM 的元素一无所知，因此忽略data-bind它们上的任何属性。

您正在尝试根据您的路线动态生成 DOM 部分。为了使其与 Knockout 一起使用，您需要在ko.applyBindings每次生成新部分时再次调用。然而，这并不是使用 Knockout 的通常理念，因为使用像它这样的数据绑定系统的全部目的是避免在视图中手动生成和操作 DOM 元素。大多数人会在开始时为所有内容创建模板，然后让他们的路由代码根据路由告诉 ViewModel 使用哪个模板（即，您将使用 observable 作为模板绑定和路由代码的名称会将 observable 设置为适当模板的名称）。

于 2013-09-24T12:10:12.297 回答
0

即使接受了 ebohlman 的答案，我也会在此处添加一个答案，我为使用 Sammy 的 KO 制作了一个小引导程序。它的占地面积比 Durandal 小一些，可能适合您的情况。

在此处查看演示项目

https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

于 2013-09-24T13:38:12.083 回答