是否可以绑定ko.observable
到引导程序list-group
?任何可以帮助实现这样的东西的图书馆,或者是否可以使用它们javascript而不使用任何其他库?
您可以使用简单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.