Question

我正在开发一个类似通知的小模块，用户可以在其中看到他在数据库（MSSQL）中记录的5个最新活动。我需要的值都在那里，但由于某种原因，敲除绑定不起作用。以下是代码段：

<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）（该功能在点击时调用，绝对没有错误显示在控制台中。）

我做错了什么？

编辑：

事情是，我忘了为该viewModel执行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>

Aslo，我稍微修改了get函数，如下所示：

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

}

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

Answer 1

尝试从foreach中删除layoutLogsModel，您已经使用绑定“with”，因此该div中的eveything将成为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>

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

1 个答案: