Knockout.js相当于holla的示例

Knockout.js相当于holla的示例,knockout.js,Knockout.js,有没有类似于Holla的更复杂的knockout.js示例 我希望在左侧窗格中有一个列表/树,用于在右侧窗格中填充表单。这是主/详细信息应用程序的框架。你可以在这里看到它。在JSFIDLE中,我稍微简化了代码,但是最好使用单独的select函数,而不是直接使用$parent.selectedItem。如果你也在做其他事情,你会想要var self=this变量,此可能未绑定到正确的对象 <table border="3" cellpadding="2"> <tr>

有没有类似于Holla的更复杂的knockout.js示例


我希望在左侧窗格中有一个列表/树,用于在右侧窗格中填充表单。

这是主/详细信息应用程序的框架。你可以在这里看到它。在JSFIDLE中,我稍微简化了代码,但是最好使用单独的select函数,而不是直接使用
$parent.selectedItem
。如果你也在做其他事情,你会想要
var self=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>
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));