추가 관찰이

Question

을 knockout.mapping에서 만들 때 배열에서 개체를 제거 .. 내 코드의 매우 단순화 된 버전입니다 다음

내 HTML 코드

:

<div class="container body-content" data-bind="foreach:base"> 
    <div class="col-md-12" data-bind="with:s"> 
     <div class="col-md-4"><pre data-bind="text:sp"></pre></div> 
     <div class="col-md-7"> 
      <div class="row" data-bind="foreach: spd"> 
       <input type="text" class="form-control" data-bind="value:value, valueUpdate: 'input'" /> 
       <button data-bind="click: $parent.addval">add</button><button data-bind="click: $parent.removeval">rem</button> 
      </div> 
     </div> 
    </div> 
</div> 

내 자바 스크립트 코드 :

<script src="knockout-3.2.0.js"></script> 
      <script src="knockout.mapping.js"></script> 
      <script> 
       var data = [{ 
        "s": { 
         "sp": "abc", 
         "spd": [ 
          { 
           "value": "" 
          } 
         ] 
        }, 
        "type": "xyz", 
       }]; 
       var AppScope = function() { 

        function BaseViewModel() { 
         var self = this; 
         self.base = ko.observableArray(); 
         self.base(ko.mapping.fromJS(data)()); 
        } 
        ko.applyBindings(new BaseViewModel()); 
       }(); 
      </script> 

'데이터'배열은 서버에서 제공되며 데이터 구조가 매우 복잡하므로 $ root를 사용할 수 없습니다. here 스타일이 답이 될 수 있지만 아직 이해할 수 없습니다 ..

코드는 버튼을 제외하고 작동합니다. "spd"아래의 배열에 {value : ""} 객체를 추가하는 방법을 이해하고 addval 및 remval 함수를 누를 때 동일한 것을 제거하는 방법을 알고 싶습니다.

모든 도움을 진심으로 감사

Answer 1

이 이상한 설정의 종류를 감사합니다,하지만 난 당신이 제공하는 것과거야. spd에는 처음에는 값이 비어있는 구성원이 하나 있습니다. 입력 상자에서 값을 변경할 수 있습니다. add 단추는 값을 새 항목에 복제합니다. remove 단추는 현재 항목을 제거합니다.

가장 까다로운 비트는 self.base에서 구조를 알아 내고 spd observableArray까지입니다. 업데이트 : s 컨텍스트 (즉 $parent)를 가져 오기 위해 클릭 바인딩 핸들러를 수정하여 s의 spd 중 어떤 버전이 작동하는지 알고 있습니다. 는 s 수준에서 addval 및 removeval 기능을 만들기 위해 나에게 이해가되지 않았기 때문에

나는 $root에 $parent에서 컨텍스트를 변경했습니다. 당신이 (당신이 jQuery를 가지고), 관련 코드는 다음과 같을 수 처리를 방해 이벤트를 사용하는 것은 같은 종류의 작업을 수행하고자한다면

var data = [{ 
 
    "s": { 
 
    "sp": "abc", 
 
    "spd": [{ 
 
     "value": "" 
 
    }] 
 
    }, 
 
    "type": "xyz", 
 
}]; 
 
var AppScope = function() { 
 

 
    function BaseViewModel() { 
 
    var self = this; 
 
    self.base = ko.observableArray(); 
 
    self.base(ko.mapping.fromJS(data)()); 
 
    self.addval = function(sData, data) { 
 
     sData.spd.push({value: ko.observable(data.value())}); 
 
    }; 
 
    self.removeval = function(sData, data) { 
 
     sData.spd.remove(data); 
 
    } 
 

 
    } 
 
    ko.applyBindings(new BaseViewModel()); 
 
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script> 
 
<div class="container body-content" data-bind="foreach:base"> 
 
    <div class="col-md-12" data-bind="with:s"> 
 
    <div class="col-md-4"><pre data-bind="text:sp"></pre> 
 
    </div> 
 
    <div class="col-md-7"> 
 
     <div class="row" data-bind="foreach: spd"> 
 
     <input type="text" class="form-control" data-bind="value:value, valueUpdate: 'input'" /> 
 
     <button data-bind="click: (data) => $root.addval($parent, data)">add</button> 
 
     <button data-bind="click: (data) => $root.removeval($parent, data)">rem</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

:

function BaseViewModel() { 
    var self = this; 
    self.base = ko.observableArray(); 
    self.base(ko.mapping.fromJS(data)()); 
    } 
    ko.applyBindings(new BaseViewModel()); 

    $('body').on('click', '.add-btn', function() { 
    const context = ko.contextFor(this); 
    const data = ko.dataFor(this); 
    const s = context.$parent; 

    s.spd.push({ 
     value: ko.observable(data.value()) 
    }); 
    }); 

    $('body').on('click', '.remove-btn', function() { 
    const context = ko.contextFor(this); 
    const data = ko.dataFor(this); 
    const s = context.$parent; 

    s.spd.remove(data); 
    });