绑定在 Knockout.js 中的 foreach 内部不起作用

Question

我必须遍历动态数组并构建表单并验证它。我确实定义了错误属性，但我收到一条错误消息 "object doesn't support property or method 'error'，我相信这是由标记触发的。我有一堆其他的非数组属性以相同的方式验证没问题，我只有数组一个有绑定错误问题。

所以在我的 html 我有

  <tbody data-bind="foreach: methToChange.nameTranslations">
            <tr>
                <td><div class="method-lb-1"><label data-bind="text:LangName"></label></div></td>
                <td><div class="method-left">
                    <input type="text" class="input-xl" maxlength="40" placeholder="required"
                            onblur="validateNameTranslations()" 
                            data-bind="value:Translation, css: { 'methods-border-error':  $parent.error() }" />
                     </div>
                 </td>
            </tr>
        </tbody>

在我的js中，下面的模型

nameTranslations 是一个对象数组 {LangName, Translation}

methToChange: {
        //many other properties
        nameTranslations: ko.observableArray([])
},

稍后我初始化值并创建错误可观察对象，然后更新数组

init: function() {
  model.methToChange.nameTranslations.error = ko.observable(false);
}

update: function() {
       var model = model.methToChange;

       model.nameTranslations(item.NameTranslations);
},

css: { 'methods-border-error':  $parent.error() }" this part causes an issue and throws an error saying that error property is undefined.

nameTranslations 数组的定义与其他非数组字段的顺序相同，我的直觉是我没有在 foreach.[=17= 中正确调用它]

Answer 1

假设我的基本结构是正确的，我认为问题是 $parent 实际上与 methToChange 的父级相关，而不是 nameTranslations 的父级。

var model = {
  methToChange: {
    //many other properties
    nameTranslations: ko.observableArray([{
      LangName: 'Talaxion',
      Translation: 'Klingon',
      NameTranslations: 'something'
    }])
  },

  init: function() {
    model.methToChange.nameTranslations.error = ko.observable(false);
  },

  update: function(item) {
    var model = model.methToChange;

    model.nameTranslations(item.NameTranslations);
  },
  validateNameTranslations: function(item) {
    model.methToChange.nameTranslations.error(true);
    
    return false;
  }
}
model.init();
ko.applyBindings(model);

.methods-border-error{
border-color: red
}

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

<table>
  <tbody data-bind="foreach: methToChange.nameTranslations">
    <tr>
      <td>
        <div class="method-lb-1"><label data-bind="text:LangName"></label></div>
      </td>
      <td>
        <div class="method-left">
          <input type="text" class="input-xl" maxlength="40" placeholder="required" data-bind="value:Translation, css: { 'methods-border-error':  $parent.methToChange.nameTranslations.error }, event: {blur: $parent.validateNameTranslations}" />
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

我最终在主层上定义了一个名为 ntError 的变量，并使用 $root.ntError() 来调用它。循环内没有其他工作

绑定在 Knockout.js 中的 foreach 内部不起作用

Binding not working inside foreach in Knockout.js

javascript

knockout.js