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

Question

I have to iterate over a dynamic array and build a form and validate it. I do define the error property but I get an error saying "object doesn't support property or method 'error' and this is triggered by the markup, I believe. I have a bunch of other, non array properties that are validated in the same manner no issues, I am only have a binding error problem with the array one.

so in my html I have

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

in js I have, the below model

nameTranslations is an array of objects {LangName, Translation}

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

And later on I init the value and create the error observable, then update the array

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. 

The definitions for nameTranslations array are placed in the same order as for the other non-array fields, my hunch is that I am not invoking this correctly inside foreach .

Answer 1

Assuming I have the basic structure correct, I think the issue is that $parent actually relates to the parent of methToChange and not the parent of 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

I ended up defining a var called ntError on the main level and used $root.ntError() to call it. Nothing else worked inside the loop