중첩 된 동적 observableArray에서 데이터 바인딩보기

Question

observableArray를 observableArray 내에 동적 크기로 놓고 View에 데이터를 바인드해야합니다.

View는 newData의 값을 렌더링하지만, View에서 편집 할 때 newData에서 값을 업데이트하지 않습니다.

https://jsfiddle.net/tvxyyzkp/6/

ko.applyBindings(new (function() { 
 
    var self = this; 
 
    self.lengthNewData = ko.observable(2); 
 
    self.newData = ko.observableArray(); 
 

 
    self.AddDataStrings = function() { 
 
    let newString = ko.observableArray(); 
 
    for(let i0 = 0; i0 < self.lengthNewData(); i0++) 
 
     newString.push(i0); 
 
    self.newData.push(newString); 
 
    } 
 

 
    self.SendData = function() { 
 
    alert(ko.toJSON(self.newData)); 
 
    } 
 
})());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<span data-bind="visible: !newData().length">Number of rows: <input data-bind="value: lengthNewData"/></span> 
 
<input type="button" value="Add" data-bind="click: $root.AddDataStrings"/> 
 
<input type="button" value="Send" data-bind="visible: newData().length, click: $root.SendData"/><br> 
 

 
<table> 
 
    <tbody data-bind="foreach: newData"> 
 
    <tr data-bind="foreach: $data"> 
 
     <td><input data-bind="value: $data"/></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

밀어 Add, 편집 및 Send 밀어 넣습니다. 데이터가 수정되지 않았습니다!
왜 변경해야합니까?

Answer 1

코드에는 두 가지 즉각적인 실수가 있습니다.

1. 관찰 가능 항목을 newString으로 푸시하지 마십시오. 당신은 어떻게해야 : 당신은 $data에 입력을 결합

   newString.push(ko.observable(i0)); 
   

2. . $data에는 풀어 놓은 데이터 값이 포함되어 있습니다. 즉, 관찰 할 수 없습니다. 이러한 설정에서 $rawData에 바인딩하십시오.

이 작동 :

ko.applyBindings(new(function() { 
 
    var self = this; 
 

 
    self.lengthNewData = ko.observable(2); 
 
    self.newData = ko.observableArray(); 
 

 
    self.AddDataStrings = function() { 
 
    let newString = ko.observableArray(); 
 
    for (let i0 = 0; i0 < self.lengthNewData(); i0++) 
 
     newString.push(ko.observable(i0)); 
 
    self.newData.push(newString); 
 
    } 
 

 
    self.SendData = function() { 
 
    alert(ko.toJSON(self.newData)); 
 
    } 
 
})());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<span data-bind="visible: !newData().length">Number of rows: <input data-bind="value: lengthNewData"/></span> 
 
<input type="button" value="Add" data-bind="click: AddDataStrings" /> 
 
<input type="button" value="Send" data-bind="visible: newData().length, click: SendData" /><br> 
 

 
<table> 
 
    <tbody data-bind="foreach: newData"> 
 
    <tr data-bind="foreach: $data"> 
 
     <td><input data-bind="value: $rawData" /></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>