0
有沿呼啦https://github.com/maccman/holla/commits/master/app的線knockout.js的一個更復雜的例子嗎?Knockout.js示範性等效霍拉的
我想有一個左窗格中,將填充在右側窗格中的表單列表/樹。
有沿呼啦https://github.com/maccman/holla/commits/master/app的線knockout.js的一個更復雜的例子嗎?Knockout.js示範性等效霍拉的
我想有一個左窗格中,將填充在右側窗格中的表單列表/樹。
下面是主/細節應用程序的骨架。你可以在這個jsfiddle上看到它。在JSFiddle中,我稍微簡化了一些代碼,但最好有一個單獨的選擇功能,而不是直接使用$parent.selectedItem
。如果你正在做其他的東西爲好,你會希望var self = this;
變量在this
可能不會被綁定到正確的目標函數使用。
<table border="3" cellpadding="2">
<tr>
<th>Item list</th>
<th>Details</th>
</tr>
<tr>
<td class="list">
<ul data-bind="foreach: items">
<li data-bind="text: label, click: $parent.select"></li>
</ul>
</td>
<td class="detail" data-bind="with: selectedItem">
<div>Item: <span data-bind="text: label"></span></div>
<div>Price: <span data-bind="text: price"></span></div>
</td>
</tr>
</table>
和JavaScript:
function Item(title, amnt) {
var self = this;
this.label = ko.observable(title);
this.price = ko.observable(amnt);
}
var items = [ new Item('foo', 27.30), new Item('fruity foo', 30.12), new Item('foo bar', 12.34)];
function viewModel(list) {
var self = this;
this.items = ko.observableArray(list);
this.selectedItem = ko.observable();
// You could call $parent.selectedItem from the binding directly, but it's a bit of a hack
this.select = function(item) {
self.selectedItem(item);
}
}
ko.applyBindings(new viewModel(items));