Question

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

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

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

Answer 1

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

您写道：

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

您忘记在产品

之前指定$ root上下文

我希望它有所帮助。

See fiddle

具有嵌套视图模型和模板的Knockout对话框

1 个答案: