knockout.js - 带有嵌套视图模型和模板的淘汰赛对话框

Question

嗨，请检查这个小提琴。单击 AddProduct 时，应显示一个对话框。我出于所有目的使用模板。

http://jsfiddle.net/vivekcek/SqANG/

<table>
    <tbody data-bind="template: { name: 'catTmpl',foreach: Categories }">
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                <input type="button" value="Add Category" data-bind="click:$root.addCategory" />
            </td>
        </tr>
    </tfoot>
</table>
<div id="details" data-bind="jqDialog: { autoOpen: false, resizable: false, modal: true, width:'auto' },openDialog: Open">
    <table>
        <tbody data-bind="template: { name: 'pdtTmpl', data: Products, foreach: Products }">
        </tbody>
    </table>
</div>
<script id="catTmpl" type="text/html">
<tr>
    <td>
        Category Name:<input type="text" data-bind="value: CategoryName"/>
    </td>
    <td>
        <input type="button" value="Add Product" data-bind="click:$root.show"/>
    </td>
</tr>
</script>
<script id="pdtTmpl" type="text/html">
<tr>
    <td>
        Product Name:<input type="text" data-bind="value: ProductName"/>
    </td>
</tr>
</script>

我的脚本如下。请检查jsfile。

Answer 1

代码中有几个错误。现在您可以打开对话框。

你写了 ：

new {pdt:''} /* instead of */  {pdt:''} 

您忘记在 Products 之前指定 $root 上下文

我希望它有所帮助。

见小提琴