jquery - 将 KnockoutJs 模板与 jQuery 结合使用

Question

我想使用 jQuery 和 KnockoutJs 模板在 DOM 中得到以下 HTML:

<div class="messageToAndFromOtherMember" id="13">
    <span>the message</span> 
    <span>2012-12-02 14:05:45.0</span> 
</div>

我已经开始编写我的 KO 模板，如下所示:

<div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
    <span data-bind="text: message"></span> 
    <span data-bind="text: sendDateFmted"></span> 
</div>

成功的ajax请求后，将执行以下js:

var messageViewModel = {
         message: response.message, 
         sendDateFmted: response.sendDateFmted, 
         messageId: response.messageId
     };
ko.applyBindings(messageViewModel);

现在我不确定如何以及在哪里实际进行绑定(bind):因为在 ajax 请求完成之前我的消息不存在，并且我可以拥有多条消息...

有人可以提出解决方案吗？

编辑 1:我已将其添加到 html 页面:

<div data-bind="template: { name: 'message-template', data: messageViewModel }"></div>

我现在收到以下 js 错误:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: $messageViewModel is not defined; Bindings value: template: { name: 'message-template', data: messageViewModel }

编辑 2:我已将代码更改如下:

var messageViewModel = {
    data: ko.observable({   
        message: response.message, 
        sendDateFmted: response.sendDateFmted, 
        messageId: response.messageId
    })
     };

$("<div>",{
    class:"messageToAndFromOtherMember"
}).data("bind", "template: { name: 'message-template', data: data }").appendTo("#messagesToAndFromOtherMember");

ko.applyBindings(messageViewModel);

请注意，我需要能够添加来自 jQuery 的元素，以便能够添加一条消息，然后添加另一条消息，依此类推。然而，上面的 jQuery 代码不起作用，我在 DOM 中没有看到任何诸如 data-bind 之类的东西...

Answer 1

var messageViewModel = {
    message: ko.observable(), 
    sendDateFmted: ko.observable(), 
    messageId: ko.observable()
};
ko.applyBindings(messageViewModel);

当数据从服务器到达时:

messageViewModel.message(response.message);
messageViewModel.sendDateFmted(response.sendDateFmted);
messageViewModel.messageId(response.messageId);

使用映射插件，您可以执行以下操作:

ko.mapping.fromJS(response, messageViewModel);

<小时/>

如果您不打算在多个地方使用模板，那么您确实不需要模板。没有模板就更简单了。看http://jsfiddle.net/3BuHR/

如果您确定需要模板，请参阅以下示例:http://jsfiddle.net/Jxhm5/

<小时/>

您似乎只是为了它的模板功能而使用 knockout 。 KO 可以做更多事情。

我会让 KO 处理基于 observableArray 的 DOM 创建。当数组修改时，DOM会自动更新。

var viewModel = {
    messages: ko.observableArray(),
};

function Message(data) {
    data = data || {};
    this.message = ko.observable(data.message);
    this.sendDateFmted = ko.observable(data.sendDateFmted);
    this.messageId = ko.observable(data.messageId);
}

<div class="message-list" data-bind="foreach: messages">
    <div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
        <span data-bind="text: message"></span> 
        <span data-bind="text: sendDateFmted"></span> 
    </div>
</div>

然后当数据从服务器到达时:

viewModel.messages.push(new Message(response));

KO 将跟踪插入、删除、重新排序，并为您更新 DOM。

http://jsfiddle.net/v5sdf/