観察できるが、以下は、私のコードの非常に単純化したバージョンである

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> 

私のJavascriptコード：

<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> 

'data'配列はサーバーから来ており、データ構造が非常に複雑なので、$ rootは使用できません。 hereのスタイルが答えかもしれませんが、まだ理解できません。

ボタン以外のコードは機能します。私は{value： ""}オブジェクトを 'spd'の配列に追加する方法を理解し、addval関数とremval関数を押すと同じものを削除する方法を理解したいと思います。

は、すべてのヘルプは心から感謝

Answer 1

これは奇妙な設定の一種であると評価されて、私はちょうどあなたが提供するものでつもりです。 spdには、最初は空の値を持つメンバーが1つあります。入力ボックスで値を変更できます。 addボタンは、値を新しいエントリに複製します。 removeボタンは、現在のエントリを削除します。

最も巧妙なビットは、構造からspd observableArrayに至りました。アップデート：sのコンテキスト（これは$parent）を使用するようにクリックバインディングハンドラを変更して、彼らがspdのどちらを処理しているかを知っています。

それはsレベルでaddvalとremoveval関数を作成するために、私には意味がありませんでしたので、私は$parentから$rootにコンテキストを変更しました。

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>

あなたは控えめなイベント処理（とあなたはjQueryのを持っている）を使用したものと同じ種類のをやってみたかった場合は、関連するコードは次のようになります。

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); 
    });