局部视图上的Knockout绑定问题

时间:2013-03-04 16:23:11

标签: knockout.js

我创建了一个部分视图,我可以将其包含在其他视图中以处理通知。

<div id="notifications">
    <!-- ko with: $root.currentNotification -->
    <span data-bind="text: notificationType"></span>
    <span data-bind="text: friendlyMessage"></span>
    <!-- ko if: $root.technicalMessageShown -->
    <span data-bind="text: technicalMessage"></span>
    <!-- /ko -->
    <button data-bind="click: $root.toggleTechnicalMessage, text: $root.technicalMessageButtonText"></button>
    <button data-bind="click: $root.dismissNotification">Dismiss</button>
    <!-- /ko -->

    <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

</div>

视图在父视图中使用以下绑定绑定到视图模型。

var notificationsViewModel = new NotificationsViewModel();
ko.applyBindings(notificationsViewModel, document.getElementById("notifications"));
var viewModel = new MainViewModel();
ko.applyBindings(viewModel);

渲染时,即使视图模型上存在currentNotification,“ko with:$ root.currentNotification”中的元素也不会包含在DOM中。

从局部视图中的最后一行显示的视图模型:

{
  "allNotifications": [
    {
      "id": "0",
      "notificationType": "Error",
      "friendlyMessage": "Lorem ipsum dolor sit amet.",
      "technicalMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, porta ac condimentum in, condimentum sed dui. Aliquam interdum."
    }
  ],
  "currentNotification": {
    "id": "0",
    "notificationType": "Error",
    "friendlyMessage": "Lorem ipsum dolor sit amet.",
    "technicalMessage": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, porta ac condimentum in, condimentum sed dui. Aliquam interdum."
  },
  "technicalMessageButtonText": "More Info"
}

知道为什么淘汰赛没有看到当前的通知?

1 个答案:

答案 0 :(得分:1)

你需要定位两个绑定,如果你只针对一个绑定,另一个将覆盖它。