Javascript KnockoutJS和多个嵌套模型

我试图找到一些关于如何创建具有两个以上级别的嵌套viewmodel的教程，例如：

• 贮藏
• • 命令
• • • 订单行
• • 命令
• • • 订单行
• • • 订单行
• 贮藏
• • 命令
• • • 订单行

所有的订单都列在商店里，当我点击一个订单时，我会看到订单行，可以编辑和删除订单行。通过一些教程，我已经在某种程度上实现了这一点，但它被搞砸了，我希望重新开始（最后我开始使用jQuery来获得我想要的东西，但感觉就像作弊和做了一半的事情）。有没有关于这方面的教程，或者关于我应该从哪里开始（KnockoutJS或其他框架）的任何指针？是的，我已经在KnockoutJS.com上学习了教程，但是在第三层的功能上遇到了问题

提前谢谢

编辑：按照下面的方法

简体中文

HTML

标题
优先
用户评论
经理评论

使用多个级别数据绑定嵌套视图模型与使用单个级别数据绑定嵌套视图模型完全相同

在下面的示例中，我将使用您的示例

Store->Order->OrderRow

，假设每个

Store

都有一个

storeName

属性，每个

Order

都有一个

OrderRow

，每个

OrderRow

都有一个

runningNumber

。我还在每一级

不使用模板 要将嵌套视图模型数据绑定到单个级别，本例中的

存储

列表可以类似于：

<ul data-bind="foreach: stores">
    <li>
        Store Name: <span data-bind="text: storeName"></span>
    </li>
</ul>

Store Name: <span data-bind="text: storeName"></span>
<ul data-bind="foreach: orders">
    <li data-bind="text: orderNumber"></li>
</ul>

要将嵌套视图模型数据绑定到单个级别，从

Order->OrderRow

可以执行以下操作：

Order number: <span data-bind="text: orderNumber"></span>
<ul data-bind="foreach: rows">
    <li>
        A row with running number: <span data-bind="text: runningNumber"></span>
    </li>
</ul>

我已经基本上运行了上面的代码（尽管添加了用于添加新的

Store

、

Order

和

OrderRow

对象的按钮）

使用模板 为了使代码更易于维护，你可以用模板来代替。当然，像往常一样，这样一个小例子的好处可能并不那么明显

在使用模板的情况下，代码基本上与上面示例中的前三种情况非常相似；在合并html之前。首先，商店的模板：

<script type="text/html" id="storeTemplate">
    Store Name: <span data-bind="text: storeName"></span>
    <ul data-bind="foreach: orders">
        <li data-bind="template: 'orderTemplate'"></li>
    </ul>
</script>

基本上就是这样。就像以前一样，我在运行上面的代码（尽管添加了用于添加新的

存储

、

订单

和

订单行

对象的按钮）

添加编辑和删除功能 向上述模板（或不带模板的绑定）添加编辑功能非常简单，只需将

span

元素更改为

input

框（如果希望其他绑定知道更改，当然需要更改一些可观察的属性）。如果您需要不同的“模式”、编辑模式和查看模式，您可以动态选择模板，您可以在淘汰文档中找到模板的示例

要添加删除功能，只需添加一个功能

Order number: <span data-bind="text: orderNumber"></span>
<ul data-bind="foreach: rows">
    <li>
        A row with running number: <span data-bind="text: runningNumber"></span>
    </li>
</ul>

<ul data-bind="foreach: stores">
    <li>
        Store Name: <span data-bind="text: storeName"></span>
        <ul data-bind="foreach: orders">
            <li>
                Order number: <span data-bind="text: orderNumber"></span>
                <ul data-bind="foreach: rows">
                    A row with running number: <span data-bind="text: runningNumber"></span>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<script type="text/html" id="storeTemplate">
    Store Name: <span data-bind="text: storeName"></span>
    <ul data-bind="foreach: orders">
        <li data-bind="template: 'orderTemplate'"></li>
    </ul>
</script>

<script type="text/html" id="orderTemplate">
    Order number: <span data-bind="text: orderNumber"></span>
    <ul data-bind="foreach: rows">
        <li data-bind="template: 'orderRowTemplate'"></li>
    </ul>
</script>

<script type="text/html" id="orderRowTemplate">
    A row with running number: <span data-bind="text: runningNumber"></span>
</script>

<ul data-bind="foreach: stores">
    <li data-bind="template: 'storeTemplate'"></li>
</ul>