敲除模板绑定不跟踪可观察数组内的元素

我想创建一个动态表与敲除，我可以在其中添加元素到observableArray。我的代码到了可以创建元素的地步，但我无法删除它们，以及在模板中创建的元素没有正确“观察”，因为我的意思是根本没有。敲除模板绑定不跟踪可观察数组内的元素

这里是我的代码：

  <table class="table table-bordered"> 
       <thead> 
        <tr> 
         <td><a id="ATS" href="#Add"><i class="icon-plus-sign"></i></a></td> 
         <td>Name</td> 
         <td>Duration</td> 
         <td>Qty Employees</td> 
         <td>Requires Labor</td> 
         <td></td> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: Jobsteps"> 
        <tr data-bind="template: 'AddStep'"> 
         <%--template goes here--%> 

        </tr> 
       </tbody> 
      </table>

视图模型：

var MyDataViewModel = { 
     Jobsteps: ko.observableArray() 
     } 
    $('#ATS').on('click', function() { 
      MyDataViewModel.Jobsteps.push({ StepName: "", Duration: "", QTYEmployees: "", RequiresLabor: true }); 
     }); 
    $('#RTS').on('click', function() { 
     MyDataViewModel.Jobsteps.remove(this); 
    });

模板

<td><a href="#Add"><i class="icon-plus-sign"></i></a></td> 
    <td> 
     <input type="text" data-bind="value: StepName" /></td> 
    <td> 
     <input type="text" data-bind="value: Duration" class="input-mini" /> 
    </td> 
    <td> 
     <input type="text" data-bind="value: QTYEmployees" class="input-mini" /> 
    </td> 
    <td> 
     <input type="checkbox" data-bind="checked: RequiresLabor" /> 
    </td> 
    <td> 
     <a id="RTS" href="#Rem"><i class="icon-minus-sign"></i></a> 
    </td>

来源

2013-08-23 Jacques Bronkhorst

'MyDataViewModel.Jobsteps.remove（this）;''this“引用触发事件的元素，而不是要删除的项目。 –

啊，很高兴知道ty :) stil a KO n00b –

好吧，首先要创建一个使用具有ID是模板的多个项目RTS，所以我相信jquery会变得困惑。

其次，我也相信，jQuery的投标不会生效，因为你试图绑定到的项目还不存在。

这里是我的建议：

 <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <td><a href="#" data-bind="click: MyDataViewModel.AddClick"><i class="icon-plus-sign"></i></a></td> 
        <td>Name</td> 
        <td>Duration</td> 
        <td>Qty Employees</td> 
        <td>Requires Labor</td> 
        <td></td> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: Jobsteps"> 
       <td><a href="#Add"><i class="icon-plus-sign"></i></a></td> <!-- no idea what this is for btw --> 
       <td> 
        <input type="text" data-bind="value: StepName" /></td> 
       <td> 
        <input type="text" data-bind="value: Duration" class="input-mini" /> 
       </td> 
       <td> 
        <input type="text" data-bind="value: QTYEmployees" class="input-mini" /> 
       </td> 
       <td> 
        <input type="checkbox" data-bind="checked: RequiresLabor" /> 
       </td> 
       <td> 
        <a href="#" data-bind="click: MyDataViewModel.EditClick"><i class="icon-minus-sign"></i></a> 
       </td> 
      </tbody> 
     </table>

然后你的淘汰赛

var MyDataViewModel = { 
    Jobsteps: ko.observableArray(), 
    AddClick: function(){ 
     MyDataViewModel.Jobsteps.push(ko.utils.unwrapObservable(ko.mapping.fromJS({ StepName: "", Duration: "", QTYEmployees: "", RequiresLabor: true }))); 
    }, 
    EditClick: function(item){ 
     MyDataViewModel.Jobsteps.remove(item); 
    } 
}

随意，当你实现这个移动你的表的身体恢复到一个模板，其中，还记得不调用ko.apply在元素集上多次绑定

来源

2013-08-23 12:09:37 Armand

敲除模板绑定不跟踪可观察数组内的元素

回答

相关问题