CSS verbindlich, wenn Array-Element geändert wird

Question

Ich habe eine json, die diese zurückgibt:

[ 
    {"home": [ 
     {"name":"Federico","surname":"","et":"20","citt":"Milano"}, 
     {"name":"Alberto","surname":"","et":"30","citt":"Milano"}, 
     {"name":"Mirko","surname":"","et":"30","citt":"Roma"}, 
     {"name":"Andrea","surname":"","et":"28","citt":"Firenze"} 

    ]}, 
    {"home": [ 
     {"name":"Brad Pitt"}, 
     {"name":"Tom Cruise"}, 
     {"name":"Leonardo DiCaprio"}, 
     {"name":"Johnny Depp"} 

    ]}, 
    {"home": [ 
     {"name":"","surname":""}, 
     {"name":"","surname":""}, 
     {"name":"","surname":""}, 
     {"name":"","surname":""} 

    ]} 

] 

Wenn es ein gültiger Wert für den Namen, zum Beispiel vorgesehen ist, würde Ich mag die background-color des Eingabefeldes ändern Weiß. Aber wenn der angegebene Wert ungültig ist, würde ich gerne die background-color wieder auf rot ändern.

HTML:

<div class="context"> 
    <div data-bind="foreach: personList"> 
     <button data-bind="text: name,click: $root.getInfoPersona($index()), attr: {'id': 'myprefix_' + $index()}"/> 
     <button data-bind="text: $index,enable: false"></button> 
    </div> 

    <form> 
     <label>Name: </label> 
     <input id="idname" data-bind="value: name, css: { changed: name.isDirty(), notchanged : !name.isDirty() }" /> 
     <label>Surname: </label> 
     <input id="idsurname" data-bind="value: surname, css: { changed: surname.isDirty }" /> 
     <label>Years: </label> 
     <input id="idyears" data-bind="value: years, css: { changed: years.isDirty }" /> 
     <label>Country: </label> 
     <input id="idcountry" data-bind="value: country, css: { changed: country.isDirty }" /> 
     <button data-bind="click: save">Save Data</button> 
     <button data-bind="click: clear">Clear</button> 
    </form> 
</div> 

Javascript:

$(document).ready(function(){ 
    ko.subscribable.fn.trackDirtyFlag = function() { 
    var original = this(); 

    this.isDirty = ko.computed(function() { 
     return this() !== original; 
    }, this); 

    return this; 
    }; 

    var ViewModel = function() { 
    var self=this; 
    var pi= (function(){ 
     var json = null; 
     $.ajax({ 
     'async': false, 
     'global': false, 
     'url': 'persona.json', 
     'dataType': 'json', 
     'success': function(data){ 
      json=data; 
     } 
     }); 
     return json; 
    })(); 

    var questionsPerson= pi; 
    console.log(questionsPerson); 
    self.personList = ko.observableArray(questionsPerson[0].home); 
    var n=pi[0].home[0].name; 
    var c=pi[0].home[0].surname; 
    var e=pi[0].home[0].et;; 
    var ci=pi[0].home[0].citt; 
    self.name = ko.observable(n).trackDirtyFlag(); 
    self.surname = ko.observable(c).trackDirtyFlag(); 
    self.years = ko.observable(e).trackDirtyFlag(); 
    self.country = ko.observable(ci).trackDirtyFlag(); 

    self.save = function() { 
     alert("Sending changes to server: " + ko.toJSON(self.name)); 
     alert("Sending changes to server: " + ko.toJSON(this)); 

    }; 

    self.clear = function(){ 
     self.name(""); 
     self.surname(""); 
     self.years(""); 
     self.country(""); 
    }; 

    self.getInfoPersona = function(indice){ 
     var i=indice; 
     var ris= pi; 
     var n=ris[0].home[indice].name; 
     var c=ris[0].home[indice].surname; 
     var e=ris[0].home[indice].et; 
     var ci=ris[0].home[indice].citt; 
     self.name(n); 
     self.surname(c); 
     self.years(e); 
     self.country(ci); 
     self.getinfoPersona =  ko.computed(function(){ 
     return self.name() + " " + self.surname() + " " + self.years() + " " + self.country(); 
     }); 

    }; 
    }; 
    ko.applyBindings(new ViewModel()); 
}); 

First screenshot: the desired effect.

Second screenshot: the wrong effect.

Die ef fect auf dem zweiten Screenshot angezeigt passiert, wenn ich auf den zweiten Namen klicken, um die Person zu ändern. Das Eingabefeld wird mit background-color=red statt background-color=white "ungültig".

Answer 1

Der schnellste Weg, um es zum Laufen zu bringen ist Ihre trackDirtyFlag Erweiterung zu ändern:

ko.subscribable.fn.trackDirtyFlag = function() { 
    var original = ko.observable(this()); // make original observable 

    this.isDirty = ko.computed(function() { 
     return this() !== original(); // compare actual and original values 
    }, this); 

    // this function will reset 'dirty' state by updating original value 
    this.resetDirtyFlag = function(){ original(this()); }; 

    return this; 
}; 

... und rufen resetDirtyFlag, nachdem Sie Werte für die Bearbeitung neu zugeordnet:

self.name(n);  self.name.resetDirtyFlag(); 
self.surname(c); self.surname.resetDirtyFlag(); 
self.years(e); self.years.resetDirtyFlag(); 
self.country(ci); self.country.resetDirtyFlag(); 

Blick auf the fiddle zu sehen wie es funktioniert.

Im Allgemeinen ist Ihr Ansatz jedoch weit davon entfernt, optimal zu sein. Vielleicht wird this article für Sie nützlich sein.