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);

现在我不确定如何以及在何处实际进行绑定：因为在ajax请求完成之前我的消息不存在而且我可以有几条消息......

有人可以建议一个解决方案吗？

编辑1 ：我已将此添加到html页面：

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

我现在得到以下js错误：

未捕获错误：无法解析绑定。消息：ReferenceError： $ messageViewModel未定义;绑定值：模板：{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

我看不到您绑定模板的位置，另请参阅文档模板的工作原理Knockout Tempate dinding

我已经创建了一些挖掘模板如何工作的示例，所以这里是DEMO

首先，您应该像这样初始化模板：

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

id='myTmpl'在哪里是您模板的名称，如果要调用它，您应该执行以下操作：

<div data-bind="template: {name: 'myTmpl', foreach: $data}" ></div>

此处已更新DEMO

修改：

另外，如果您有多条消息，我已经为您创建了如何使用foreach +模板的示例HERE IS THE LINK

Answer 2

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/

你似乎只是因为它的模板功能而使用淘汰赛。 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/

Answer 3

以下是从jQuery动态生成div所需的内容：

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

非常感谢您输入Markus和Pavlo！我肯定会使用你的提示马库斯。

将KnockoutJs模板与jQuery一起使用

3 个答案: