使用映射插件时，在Knockout中未定义beforeChange值

时间：2019-05-09 06:47:28

标签： events knockout.js knockout-mapping-plugin

基于this question的答案，我尝试通过以下代码在可观察范围内获取值。

var phoneBook;

function debug(s) {
  $("#log").append('<br>' + s);
}

function PhoneNumber(data) {
  var self = this;
  self.phoneType = ko.observable();
  self.phoneNumber = ko.observable();


  self.phoneNumber.subscribe(function(newValue) {
    debug('newvalue: ' + newValue);
  });

  self.phoneNumber.subscribe(function(previousValue) {
    debug(previousValue);

  }, self, "beforeChange");

  ko.mapping.fromJS(data, PhoneNumber.mapping, self);
}
PhoneNumber.mapping = {};

function Contact(data) {
  var self = this;

  self.name = ko.observable();
  self.email = ko.observable();
  self.phones = ko.observableArray();

  ko.mapping.fromJS(data, Contact.mapping, self);
}
Contact.mapping = {
  phones: {
    create: function(options) {
      return new PhoneNumber(options.data);
    }
  }
};

function PhoneBook(data) {
  var self = this;

  self.contacts = ko.observableArray();

  ko.mapping.fromJS(data, PhoneBook.mapping, self);
}
PhoneBook.mapping = {
  contacts: {
    create: function(options) {
      return new Contact(options.data);
    }
  }
};

var phoneBookData = {
  contacts: [{
      name: 'John',
      email: 'address@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '999-888-777'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777'
      }]
    },
    {
      name: 'John2',
      email: '222address@domain.com',
      phones: [{
        phoneType: '22Home Phone',
        phoneNumber: '22999-888-777'
      }, {
        phoneType: '22Business Phone',
        phoneNumber: '444-888-777'
      }]
    }
  ]
};

var phoneBookDataOther = {
  contacts: [{
      name: 'peter',
      email: 'address@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '999-888-777'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777'
      }]
    },
    {
      name: 'almond',
      email: '222address@domain.com',
      phones: [{
        phoneType: '22Home Phone',
        phoneNumber: '22999-888-777'
      }, {
        phoneType: '22Business Phone',
        phoneNumber: '444-888-777'
      }]
    }
  ]
};

function dofunc() {
  ko.mapping.fromJS(phoneBookDataOther, phoneBook);
}

$(document).ready(function() {
  phoneBook = new PhoneBook(phoneBookData);
  ko.applyBindings(phoneBook);

  setTimeout(dofunc, 5000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<ul data-bind="foreach: contacts">
  <li>
    <div data-bind="text: name"></div>
    <div data-bind="text: email"></div>
    <ul data-bind="foreach: phones">
      <li>
        <span data-bind="text: phoneType"></span>:
        <span data-bind="text: phoneNumber"></span>
      </li>
    </ul>
  </li>
</ul>


<div>
  <p id="log"></p>
</div>

当再次调用映射插件时（在5秒超时后），将发生change事件，但是previousValue总是以undefined的形式出现。

我做错了什么？

这也是jsfiddle：https://jsfiddle.net/icinema/ungbz27s/1/

1 个答案:

答案 0 :(得分：2)

这里的问题是您使用的映射插件错误，并且您的测试数据没有意义。

当您向完全相同的可观察值写入新值时，将永远只有一个“上一个”值。但是，当您映射一组完全不同的数据时，映射插件将丢弃所有视图模型，并创建新的视图模型。

应该如何知道在第一轮中名称为“ John”的对象应该是在第二轮中名称为“ peter”的同一个人？不可以因此，它会将所有联系人（包括他们的所有电话号码）排除掉并创建新联系人。在这种情况下，永远不会有“上一个”值。

您需要的是

  • 给联系人和电话号码一个键，这样在ko.mapping.fromJS的呼叫中就可以将它们识别为同一对象。
  • 通过向映射配置添加key函数，向映射插件告知对象的哪个属性是关键。

阅读documentation of the mapping plugin-阅读全部内容，开始并不多。

在下面的示例中，我将name用作联系人的键，将phoneType用作电话的键，并修改了测试数据，以使它们在两组电话簿中具有相同的名称和电话类型。您可能想使用联系人ID号作为键，而不是姓名。

使用key函数的优点是敲除将仅更新DOM中的电话号码文本，而不是丢弃并重新创建整个<li>及其中的所有内容，因为它可以识别现有的viewmodel实例并保留它们。这样可以减少渲染时间。

/* global ko, $ */

function debug(s) {
  $("#log").append('<br>' + s);
}

function PhoneNumber(data) {
  var self = this;
  self.phoneType = ko.observable();
  self.phoneNumber = ko.observable();

  self.phoneNumber.subscribe(function(newValue) {
    debug('new value: ' + newValue);
  });

  self.phoneNumber.subscribe(function(previousValue) {
    debug('previous value: ' + previousValue);

  }, self, "beforeChange");

  ko.mapping.fromJS(data, PhoneNumber.mapping, self);
}
PhoneNumber.mapping = {};

function Contact(data) {
  var self = this;

  self.name = ko.observable();
  self.email = ko.observable();
  self.phones = ko.observableArray();

  ko.mapping.fromJS(data, Contact.mapping, self);
}
Contact.mapping = {
  phones: {
    create: function(options) {
      return new PhoneNumber(options.data);
    },
    key: function (data) {
      return ko.unwrap(data.phoneType);
    }
  }
};

function PhoneBook(data) {
  var self = this;

  self.contacts = ko.observableArray();

  ko.mapping.fromJS(data, PhoneBook.mapping, self);
}
PhoneBook.mapping = {
  contacts: {
    create: function(options) {
      return new Contact(options.data);
    },
    key: function (data) {
      return ko.unwrap(data.name);
    }
  }
};


var phoneBookData = {
  contacts: [{
      name: 'John',
      email: 'john@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '999-888-777-old'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777-old'
      }]
    },
    {
      name: 'Peter',
      email: 'peter@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '22999-888-777-old'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777-old'
      }]
    }
  ]
};

var phoneBookDataOther = {
  contacts: [{
      name: 'John',
      email: 'john@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '999-888-777-new'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777-new'
      }]
    },
    {
      name: 'Peter',
      email: 'peter@domain.com',
      phones: [{
        phoneType: 'Home Phone',
        phoneNumber: '22999-888-777-new'
      }, {
        phoneType: 'Business Phone',
        phoneNumber: '444-888-777-new'
      }]
    }
  ]
};

$(document).ready(function() {
  var phoneBook = new PhoneBook(phoneBookData);

  ko.applyBindings(phoneBook);

  debug('<hr>');
  setTimeout(function dofunc() {
    ko.mapping.fromJS(phoneBookDataOther, phoneBook);
  }, 3000);
});
#log { font-family: monospace; font-size: small; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<ul data-bind="foreach: contacts">
  <li>
    <div data-bind="text: name"></div>
    <div data-bind="text: email"></div>
    <ul data-bind="foreach: phones">
      <li>
        <span data-bind="text: phoneType"></span>:
        <span data-bind="text: phoneNumber"></span>
      </li>
    </ul>
  </li>
</ul>

<hr>
<div id="log"></div>

相关问题
最新问题