使用无容器控制流语法的敲除错误

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>

该页面不断向我大喊这些错误：

未捕获的ReferenceError：

无法处理绑定“ foreach：function（）{返回durationValues}”

消息：无法处理绑定“如果：函数（）{返回（$ index（）=== 0）}”

消息：无法处理绑定“单击：函数（）{返回addDurationValue}”

消息：在初始化（敲除）的newValueAccessor（knockout-3.4.2.debug.js：4231）处，单击时未定义addDurationValue（在createBindingsStringEvaluator（knockout-3.4.2.debug.js：2992），：3：58处单击评估） -3.4.2.debug.js：4241）在初始化时（knockout-3.4.2.debug.js：4234）在剔除-3.4.2.debug.js：3368在Object.ignore（knockout-3.4.2.debug） .js：1480），位于剔除3.4.2.debug.js：3367，位于Object.arrayForEach（knockout-3.4.2.debug.js：159），位于applyBindingsToNodeInternal（knockout-3.4.2.debug.js：3353），位于applyBindingsToNodeAndDescendantsInternal（knockout-3.4.2.debug.js：3233）

Answer 1

您的无容器控制流语法很好。 但是，您需要在click绑定函数中使用的addDurationValue之前添加$parent或$root ，以提供适当的绑定上下文

在foreach绑定内，敲除将在每个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 -->