1

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

<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 未知。

4

1 回答 1

2

是否可以使用基本模板，将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没有正确标记。不太清楚这是怎么回事。

小提琴

于 2014-07-21T15:05:49.593 回答