Question

我有一个json返回这个：

[
    {"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":""}

    ]}

]

例如，如果为name提供了有效值，我想将输入框的background-color更改为白色。但如果提供的值无效，我想将background-color更改为红色。

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.

当我点击第二个名称来改变人物时，第二个屏幕截图上显示的效果就会发生。使用background-color=red代替background-color=white，输入框变为“无效”。

Answer 1

最快捷的方法是修改trackDirtyFlag扩展程序：

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

...并在重新分配值进行编辑后调用resetDirtyFlag：

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

请查看the fiddle，看看它是如何运作的。

然而，总的来说，你的方法远非最佳。也许this article会对你有用。

更改数组元素时的CSS绑定

1 个答案: