敲除模板綁定不跟蹤可觀察數組內的元素

我想創建一個動態表與敲除，我可以在其中添加元素到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

敲除模板綁定不跟蹤可觀察數組內的元素

回答

相關問題