Question

我是SammyJS的新手。我正在尝试使用SammyJS和KnockoutJS创建一个示例应用程序。我正在创建一些RunTime 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());

Answer 1

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

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

Answer 2

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

在这里查看演示项目

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

运行时HTML不能与knockoutJS一起使用？

2 个答案: