Question

是否可以将ko.observable绑定到引导程序list-group？任何可以帮助实现这样的东西的图书馆，或者可以在不使用任何其他库的情况下使用它们进行javascript？

Answer 1

您可以使用简单的foreach绑定为bootstrap list-group的列表项生成所需的HTML，并且可以使用css和click绑定以跟踪所选项目。

您的观点应如下所示：

<div class="list-group" data-bind="foreach: items">  
  <a href="#" class="list-group-item" data-bind="
         css: { active: $parent.selectedItem() == $data}, 
         click: $parent.select.bind($parent)">
    <h4 class="list-group-item-heading" data-bind="text: header"></h4>
      <p class="list-group-item-text" data-bind="text: text"></p>
  </a>
</div>

在视图模型中，您可以将其绑定到ko.observableArray：

ko.applyBindings({
    selectedItem: ko.observable(),
    items: ko.observableArray([
        {header: 'header 1', text: "Cras justo odio"},
        {header: 'header 2', text: "Dapibus ac facilisis in"},
        {header: 'header 3', text: "Morbi leo risus"},
        {header: 'header 4', text: "Porta ac consectetur ac"},
        {header: 'header 5', text: "Vestibulum at eros"}
    ]),
    select: function(item){
        this.selectedItem(item);
    }
});

演示JSFiddle。

将bootstrap list-group绑定到knockout ko.observable

1 个答案: