如何在 Bootstrap 主题下拉列表中使用 KnockoutJS 进行 foreach 绑定答案

【问题标题】：How to do a foreach binding using KnockoutJS in Bootstrap-themed dropdown如何在 Bootstrap 主题下拉列表中使用 KnockoutJS 进行 foreach 绑定
【发布时间】：2014-02-06 14:08:57
【问题描述】：

我正在开发一个类似通知的小模块，用户可以在其中看到他在数据库 (MSSQL) 中记录的 5 个最新活动。我需要的值都在那里，但由于某种原因，淘汰赛绑定不起作用。这里是代码sn-ps：

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
  <h3 style="border: none;">Recent activities:</h3>
  <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
  <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
    <div class="alert inbox">
      <a href="javascript:void(0)">
        <i class="icon-book" style="color: orange;"></i>
        Some text
      </a>
      <br>
      Some text #2
    </div>
  </ul>      
</div>

现在，我只想为 observableArray 中的每个项目显示随机文本。 ViewModel 如下：

var layoutLogsModel = {    
    notification: ko.observableArray()
};

function getLastFiveActivities() {
    get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {        
        layoutLogsModel.notification(data);
    });
}

而且每次我调用这个函数时，列表都是空的（IMAGE）（该函数在点击时被调用，并且控制台中绝对不会显示任何错误）。

我做错了什么？

编辑：

问题是，我忘记为该视图模型执行ko.applyBindings。然后，我将 HTML 更改为如下所示：

<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
                                    <div class="alert inbox">
                                        <a href="javascript:void(0)">
                                            <i class="icon-user" style="color: green;"></i>
                                            <span data-bind="text: $data"></span>
                                        </a>
                                    </div>
                                </ul>

另外，我稍微修改了get函数，如下：

function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {        
    layoutLogsModel.notification(data.Notification);        
});

}

（根据包含数组的 MVC 模型属性将 data 更改为 data.Notification）毕竟，数据立即可用。

【问题讨论】：

标签： javascript twitter-bootstrap knockout.js

【解决方案1】：

尝试从 foreach 中删除 layoutLogsModel，您已经将它与绑定“with”一起使用，因此该 div 中的所有内容都将成为 layoutLogsModel 的一部分。

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
  <h3 style="border: none;">Recent activities:</h3>
  <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
  <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
    <div class="alert inbox">
      <a href="javascript:void(0)">
        <i class="icon-book" style="color: orange;"></i>
        Some text
      </a>
      <br>
      Some text #2
    </div>
  </ul>      
</div>

【讨论】：

是的，我做了类似的事情，我会在原始问题的编辑中发布。