淘汰赛绑定不会更新模型

Question

我只是开始使用Knockout，但是我已经对MVVM（在WPF中应用）有丰富的经验。 我遇到的问题是包装模型对象的Knockout视图模型不会更新该原始模型。 这是一个小例子：

的HTML

<select name="size" id="sel-size" data-bind="options: sizes, value: size"></select>

JS

// default settings
var settings = {
    size: 5
};

// settings view model
var settingsVM = function () {
    return {
        sizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        size: ko.observable(settings.size)
    }
}();

// subscribe to changes
settingsVM.size.subscribe(function() {
    alert("Model: " + settings.size + " / VM: " + settingsVM.size());
})

ko.applyBindings(settingsVM);

在JSFiddle中查看

更改下拉选项后，仅更新视图模型中的settingsVM.size() ，但模型中的settings.size保持不变。

似乎使用引用初始化observable并不能将该引用保留为属性访问器的后备字段。 我对MVVM淘汰赛方式缺少什么？

Answer 1

当更改select的值时，实际上覆盖了可观察大小的内容。 如果要设置背景字段类型的安排，则必须使用可计算的可观察值进行读/写。

另外，如果您确实想更新原始的“设置”对象，则需要处理该问题，而不是单独处理settings.size属性。 这样的事情将使原始模型与select保持一致：

// settings view model
var settingsVM = function () {
  var self=this;
  self.settings = ko.observable({
    size: 5
  });
  self.sizes =   [{size:1},{size:2},{size:3},{size:4},{size:5}];
  self.size = ko.computed({
          read:function(){
            return self.settings();
          },
          write:function(val){
            self.settings(val);
   }});
   self.size.subscribe(function() {

            alert("Model: " + self.settings().size + " / VM: " + self.size().size);
        });
};

ko.applyBindings(new settingsVM());

JSFiddle

Answer 2

淘汰赛的肮脏小秘密是，它并不是真正的MVVM。 它没有独立于视图建模的数据建模结构，因此只是VVM。 在普通的应用程序设计中，数据模型位于服务器上，应用程序中的“模型”是一组简单的AJAX例程，用于将其片段放入视图模型中。 淘汰赛本身与AJAX无关，因此如何处理应用程序的那部分取决于您自己（但通常很简单）。

在您的问题中，您希望模型自动更新以反映相应的viewmodel元素。 那是多余的； 尚不清楚您是否需要单独的东西，只需从viewmode复制一个值即可。 viewmodel可以包含模型。 但是，如果你心里有多个模型-Y的东西做，这样你就需要你的模型元素在结构集中到一起，使用的威尔·詹金斯的建议， subscribe是应对在视图模型变化的最直接的方法。

在下面的评论中，Will Jenkins提出了Knockout提供的实用程序功能，可在JSON和可观察对象之间进行转换。 这些对于在模型和视图模型之间来回迁移也很有帮助。

另请参阅： ko.mapping

Answer 3

它不更新的原因是您的settings.size不可观察，并且您的代码未提供将settings.size用作html中的选定大小。

// default Model for settings
function settings(){
    this.size = ko.observable(5);
}

// settings view model
var settingsVM = function () {    
    return {
        sizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        settings: new settings()
    }
}();

// subscribe to changes
settingsVM.settings.size.subscribe(function() {
    alert("model: " + settingsVM.settings.size());
})

ko.applyBindings(settingsVM);

在这里查看更新的小提琴