Question

我想在表格中显示多个网址，并在每个网址旁边放置一个删除按钮。由于这在几个地方使用，我决定使用淘汰模板。

<script type="text/html" id="new-repo-template">
  <tr class="row">
    <td class="url-cell"
        data-bind="text: repo.url"></td>
    <td class="button-cell">
        <button data-bind="click: removeUrl">X</button>
    </td>
  </tr>
</script>

<table>
  <tbody data-bind="template: {name: 'new-repo-template',
                               foreach: myDataCollection, as: 'repo',
                               data: {removeUrl: myFunctions.removeRepo } }">
  </tbody>
</table>

问题是我需要将foreach组合到我想要提供的数据和函数调用中，该函数调用存储在myFunction对象中，该对象不属于myDataCollection。

是否可以将此foreach与集合数据和数据对象结合使用，其中包含所有集合对象的静态属性和公共属性？

我在数据绑定旁边的foreach的当前设置导致数据未设置且属性removeUrl未知。

Answer 1

是否可以使用基本模板，将foreach数据移动到data属性，并使用无容器foreach语法调用迭代。由于模板的范围是data，因此您可以使用$parent来访问该函数。

<script type="text/html" id="new-repo-template">
  <tr></tr>
 <!-- ko foreach: collection -->
  <tr class="row">
    <td class="url-cell" data-bind="text: url"></td>
    <td class="button-cell">
     <button data-bind="click: $parent.removeUrl">X</button>
    </td>
  </tr>
 <!-- /ko -->
</script> 

<table>
  <tbody data-bind="template: {name: 'new-repo-template',
                               data: {collection: myDataCollection,  
                                      removeUrl: myFunctions.removeRepo } 
                              }"> 
 </tbody>
</table>

注意：如果没有空<tr>，则foreach中的数据未正确标记。不太清楚这是怎么回事。

将淘汰模板foreach与数据相结合

1 个答案:

Fiddle