無法更新雙向數據綁定的默認值

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事件聽衆連接視圖和模型