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

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.