无法更新双向数据绑定的默认值

Question

我在我的项目中使用了Backbone。但是当我尝试在视图上使用双向数据绑定时，当用户更改绑定文本字段时，我无法更新默认值。下面是我的示例代码：

jQuery(document).ready(function($) { 
    var MyModel = Backbone.Model.extend({ 
     defaults: { 
      "val_one": "1", 
      "val_two": "2" 
     } 
    }); 

var MyView = Backbone.View.extend({ 
    initialize: function() { 
    var self = this; 

    this.model = this.model || new MyModel(); 

    this.viewModel = { 
     val_one: ko.observable(this.model.get('val_one')), 
     val_two: ko.observable(this.model.get('val_two')) 
    } 

    this.viewModel.val_one.subscribe(function(newValue) { 
     self.model.set({val_one:newValue}); 
    }); 

    this.viewModel.val_two.subscribe(function(newValue) { 
     var nNumber = parseInt(newValue) + parseInt(self.model.get('val_one')); 
     self.model.set({val_two:nNumber}); 
    }); 

    this.model.on("change", function() { 
     console.log("Model changed"); 

     //you can do whatever you want with your model now 
     //e.g sync it with the server, update parts of your 
     //view, etc 
    }) 
    }, 

    render: function() { 
    var that = this; 
    _.each(this.model.attributes, function(val, key) { 
     var row = "<tr><td><input type='text' data-bind='value: " + key + "' /></td><td><p data-bind='text: " + key + "'>0</p></td></tr>"; 
     $('#mytable').append(row); 
    }); 

    ko.applyBindings(this.viewModel); 
    } 
}); 

function UpdateView(){ 
    var newModel = new MyModel(); 
    var modelView = new MyView({model: newModel}); 
    modelView.render(); 
} 

UpdateView(); 

}); 

我已经写了这行代码：var nNumber = parseInt(newValue) + parseInt(self.model.get('val_one'));。所以无论何时用户更新文本字段，默认值都应该更新。但标签不会更新为新号码。

所以我想新的数字应该被替换在文本字段旁边的标签中。请看图片：

​​

问候，

Answer 1

以下是为双向绑定创建的简单EventManager。随意使用它。

define(['underscore','backbone'], function (_, Backbone) { 
"use strict"; 

var EventManager, 
    wrapperCallback, 
    triggerParams, 
    receiverName, 
    senderObj; 

EventManager = function() { 

    this.bind = function (sender, receiver, eventName, callback, clearAll, senderName) { 

     wrapperCallback = this.getWrapperCallback(receiver, eventName, senderName, callback); 

     if (clearAll === true) { 
      sender.unbind(eventName); 
     } else { 
      sender.unbind(eventName, wrapperCallback); 
     } 

     console.log("Bind " + receiverName + " on " + senderName + "." + eventName); 

     sender.bind(eventName, wrapperCallback, receiver); 
    }; 

    this.trigger = function (sender, eventName, data) { 

     console.log("Trigger Event: " + eventName); 
     senderObj = sender; 
     [].splice.call(arguments, 0, 1); 
     senderObj.trigger.apply(senderObj, arguments); 
    }; 

    this.getWrapperCallback = function (receiver, eventName, senderName, callback) { 
     function wrapperFunction(params) { 

      console.log("Received Event: " + eventName + " from " + senderName); 

      callback.apply(receiver, arguments); 
     } 

     return wrapperFunction; 
    }; 

}; 

return new EventManager(); 

}）;

Answer 2

BackboneJs不具有双向数据绑定，您需要使用事件侦听器来实现它自己，你的情况使用onkeyup事件听众连接视图和模型