1

我想使用 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 未定义；绑定值：模板：{名称：'message-template'，数据：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中看不到任何数据绑定之类的东西......

4

3 回答 3

1

我没有看到你在哪里绑定你的模板，另外，请阅读文档模板如何工作Knockout Tempate dinding


我已经创建了一些淘汰模板如何工作的示例，所以这里是演示


首先你应该像这样初始化你的模板：

<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 + 模板的示例，这里是链接

于 2012-12-02T16:34:18.367 回答
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/

您似乎只是因为它的模板功能而使用淘汰赛。KO可以做得更多。

相反，我会让 KO 处理基于observableArray's 的 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/

于 2012-12-02T16:38:06.340 回答
1

这是我从 jQuery 动态生成 div 所需要的：

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

非常感谢您的投入 Markus 和 Pavlo！我一定会使用你的提示 Markus。

于 2012-12-02T20:40:52.730 回答