コンテナレス制御フロー構文のノックアウトエラー

Question

私はまだノックアウトには新しく、多分何か間違っています。私は、ユーザーが追加できる動的な入力コントロールを持つhtmlフォームを持っています。私は問題がコンテナレス制御フローの構文に起因するのかどうかはわかりませんが、私はそれがなければ同じ結果をどのように達成できるのか分かりません。

動的部分のためのマークアップはこれです：

//begin form 

    <!-- ko foreach: durationValues --> 
     <div class="form-group"> 
      <!-- ko if: ($index() === 0) --> 
       <label for="Values[0].Value">Values</label> 
      <!-- /ko --> 
      <div class="input-group"> 
       <input class="form-control" type="text" data-bind="value: text, attr: { name: 'Values[' + $index() + '].Value' }" data-val="true" data-val-required="Value required." /> 
       <span class="input-group-btn"> 
        <!-- ko if: ($index() === 0) --> 
         <button class="btn btn-outline-secondary" type="button" data-bind="click: addDurationValue"><i class="fa fa-plus-circle"></i> Add</button> 
        <!-- /ko --> 
        <!-- ko if: ($index() > 0)--> 
         <button class="btn btn-outline-secondary" type="button" data-bind="click: $parent.removeDurationValue"><i class="fa fa-trash"></i> Remove</button> 
        <!-- /ko --> 
       </span> 
      </div> 
      <span class="field-validation-valid invalid-feedback" data-bind="attr: { 'data-valmsg-for': 'Values[' + $index() + '].Value' }" data-valmsg-replace="true"></span> 
     </div> 
    <!-- /ko --> 

    //endform 
    //jquery, jquery-validate, jquery-validate-unobtrusive, bootstrap and knockout script files loaded 

    <script> 
    function DurationValue(text) { 
     this.text = text; 
    } 

    function DurationValuesViewModel() { 
     var self = this; 

     self.durationValues = ko.observableArray([ 
      new DurationValue("") 
     ]); 

     self.addDurationValue = function() { 
      self.durationValues.push(new DurationValue("")); 

      //Remove current form validation information 
      $("form") 
       .removeData("validator") 
       .removeData("unobtrusiveValidation"); 

      //Parse the form again 
      $.validator.unobtrusive.parse("form"); 
     }; 

     self.removeDurationValue = function (durationValue) { self.durationValues.remove(durationValue); }; 
    } 

    ko.applyBindings(new DurationValuesViewModel()); 
    </script> 

ページは私にこれらのエラーを叫んで保持します。

Uncaught ReferenceError:

Unable to process binding "foreach: function(){return durationValues }"

Message: Unable to process binding "if: function(){return ($index() === 0) }"

Message: Unable to process binding "click: function(){return addDurationValue }"

Message: addDurationValue is not defined at click (eval at createBindingsStringEvaluator (knockout-3.4.2.debug.js:2992), :3:58) at newValueAccessor (knockout-3.4.2.debug.js:4231) at init (knockout-3.4.2.debug.js:4241) at init (knockout-3.4.2.debug.js:4234) at knockout-3.4.2.debug.js:3368 at Object.ignore (knockout-3.4.2.debug.js:1480) at knockout-3.4.2.debug.js:3367 at Object.arrayForEach (knockout-3.4.2.debug.js:159) at applyBindingsToNodeInternal (knockout-3.4.2.debug.js:3353) at applyBindingsToNodeAndDescendantsInternal (knockout-3.4.2.debug.js:3233)

Answer 1

あなたのコンテナのない制御フロー構文が細かいです。しかし、あなたが結合foreach内部の適切binding context

を提供するために、click結合機能で使用addDurationValue前$parentまたは$rootを追加する必要があり、ノックアウトは、各DurationValueオブジェクトではなく、DurationValuesViewModelインスタンスにaddDurationValueを探します。したがって、関数を探す場所を指定する必要があります。この場合、$rootと$parentは同じオブジェクトを表します。

function DurationValue(text) { 
 
    this.text = text; 
 
} 
 

 
function DurationValuesViewModel() { 
 
    var self = this; 
 

 
    self.durationValues = ko.observableArray([ 
 
    new DurationValue("") 
 
    ]); 
 

 
    self.addDurationValue = function() { 
 
    self.durationValues.push(new DurationValue("")); 
 

 
    //Remove current form validation information 
 
    $("form") 
 
     .removeData("validator") 
 
     .removeData("unobtrusiveValidation"); 
 

 
    // Commented for now 
 
    //Parse the form again 
 
    // $.validator.unobtrusive.parse("form"); 
 
    }; 
 

 
    self.removeDurationValue = function(durationValue) { 
 
    self.durationValues.remove(durationValue); 
 
    }; 
 
} 
 

 
ko.applyBindings(new DurationValuesViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<!-- ko foreach: durationValues --> 
 
<div class="form-group"> 
 
    <!-- ko if: ($index() === 0) --> 
 
    <label for="Values[0].Value">Values</label> 
 
    <!-- /ko --> 
 
    <div class="input-group"> 
 
    <input class="form-control" type="text" data-bind="value: text, attr: { name: 'Values[' + $index() + '].Value' }" data-val="true" data-val-required="Value required." /> 
 
    <span class="input-group-btn"> 
 
      <!-- ko if: ($index() === 0) --> 
 
       <button class="btn btn-outline-secondary" type="button" data-bind="click: $parent.addDurationValue"><i class="fa fa-plus-circle"></i> Add</button> 
 
      <!-- /ko --> 
 
      <!-- ko if: ($index() > 0)--> 
 
       <button class="btn btn-outline-secondary" type="button" data-bind="click: $parent.removeDurationValue"><i class="fa fa-trash"></i> Remove</button> 
 
      <!-- /ko --> 
 
     </span> 
 
    </div> 
 
    <span class="field-validation-valid invalid-feedback" data-bind="attr: { 'data-valmsg-for': 'Values[' + $index() + '].Value' }" data-valmsg-replace="true"></span> 
 
</div> 
 
<!-- /ko -->