jquery – KnockoutJS使用Mapping Plugin订阅属性更改

前端之家收集整理的这篇文章主要介绍了jquery – KnockoutJS使用Mapping Plugin订阅属性更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有反正我可以告诉knockout映射插件订阅所有属性更改调用某个函数

我意识到我可以手动订阅属性更改事件以这种方式:

  1. var viewmodel = {
  2. name: ko.observable('foo'),}
  3.  
  4. // subscribe manually here
  5. viewmodel.name.subscribe(function(newValue){
  6. // do work
  7. })

我想能够一般地订阅,虽然,因为我的视图模型可能会有所不同,我不想硬编码的属性名称。我创建了一个函数来做到这一点,但它可能不是最好的方法。它可以在除IE7及以下的所有浏览器。

这里我使用viewmodel作为参数,并试图反思它订阅属性

  1. function subscribeToKO(data) {
  2.  
  3. $.each(data,function (property,value) {
  4. if (getType(value) == "Object")
  5. data[property] = subscribeToKO(value);
  6. else if (getType(value) == "Array") {
  7. $.each(value,function (index,item) {
  8. item = subscribeToKO(item);
  9. });
  10. }
  11. else {
  12. if (value.subscribe) {
  13. value.subscribe(function (newValue) {
  14. // do work
  15. });
  16. }
  17. }
  18. });
  19. return data;
  20. }

像我说的这样工作,但由于我使用映射pluging我希望有一个钩子,我可以使用提供一个函数,将一般订阅属性更改。

就像是:

  1. mapping = {
  2. create: function(options){
  3. options.data.subscribe(function(newValue){
  4. // do work ???
  5. });
  6. }
  7. }
  8.  
  9. ko.mapping.fromJS(viewmodel,mapping);

有任何想法吗?

解决方法

这里是一个基于 Ryan Niemeyer’s dirty flag的通用方法
点击这里查看 JsFiddle

Html:

  1. <ol>
  2. <li>
  3. Telephone : <input data-bind="value: telephone"/>
  4. </li>
  5. <li>
  6. Address : <input data-bind="value: address"/>
  7. </li>
  8. </ol>

Javascript:

  1. var model = {
  2. telephone: ko.observable('0294658963'),address: ko.observable('167 New Crest Rd')
  3.  
  4. };
  5. // knockout extension for creating a changed flag (similar to Ryan's dirty flag except it resets itself after every change)
  6. ko.changedFlag = function(root) {
  7. var result = function() {};
  8. var initialState = ko.observable(ko.toJSON(root));
  9.  
  10. result.isChanged = ko.dependentObservable(function() {
  11. var changed = initialState() !== ko.toJSON(root);
  12. if (changed) result.reset();
  13. return changed;
  14. });
  15.  
  16. result.reset = function() {
  17. initialState(ko.toJSON(root));
  18. };
  19.  
  20. return result;
  21. };
  22. // add changed flag property to the model
  23. model.changedFlag = new ko.changedFlag(model);
  24. // subscribe to changes
  25. model.changedFlag.isChanged.subscribe(function(isChanged) {
  26. if (isChanged) alert("model changed");
  27. });
  28. ko.applyBindings(model);​

猜你在找的jQuery相关文章