当前位置：文江博客话题详情

Knockout.js 相当于 holla 的示例

发布于 2024-12-22 02:55:04 字数 220 浏览 2 评论 0原文

是否有一个类似于 Holla https://github.com 的 Knockout.js 更复杂的示例。 com/maccman/holla/commits/master/app ？

我想在左侧窗格上有一个列表/树，用于填充右侧窗格上的表单。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巷雨优美回忆 2024-12-29 02:55:04

这是主/详细信息应用程序的骨架。你可以在 jsfiddle 上看到它。在 JSFiddle 中，我稍微简化了代码，但最好有一个单独的选择函数，而不是直接使用 $parent.selectedItem。如果您还要做其他事情，则需要在 this 可能未绑定到正确对象的函数中使用 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>

和 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));

Here's a skeleton for a master/details app. You can see it live on this jsfiddle. In the JSFiddle, I simplified the code a bit, but it's probably better to have a separate select function rather than using $parent.selectedItem directly. If you're doing other stuff as well, you'll want the var self = this; variable to use in functions where this may not be bound to the right object.

<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>

and the 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));

回复收藏 0 原文

~没有更多了~