帶嵌套視圖模型和模板的敲除對話框

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> 

然後我的腳本如下。請檢查jsfidle。

Answer 1

代碼中有幾處錯誤。 現在您可以打開對話框。

您寫道：

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

你忘了指定產品

我希望它能幫助前的$根上下文。

See fiddle