如何更新 knockout.js 中的对象属性值

Question

我是 knockout.js 的新手，所以...

我有一个对象：

function My_editor()
{
    this.brushSize = 10;
    this.activeColor = '#ff0000';
};
var editor = new My_editor();

它是某种排序或绘图工具。这是淘汰赛视图模型：

function AppViewModel(ed)
{
    this.brushSize = ko.observable(ed.brushSize);
    this.activeColor = ko.observable(ed.activeColor);
}
ko.applyBindings(new AppViewModel(editor));

我写了一些 html 界面，它工作正常。 问题是，如果我通过 Knockout 更改 brushSize 值，它不会更改编辑器对象的相应属性。 我正在使用 Google Chrome 开发人员检查对象状态的工具。

一块html：

<p>Brush Size: <input type="number" data-bind="value: brushSize" /></p>
<p>Active Color: <input type="color" data-bind="value: activeColor" /></p>

此外，如果我在控制台中更改 brushSize，它不会在界面和挖空中更新。我正在使用：

editor.brushSize = 15;

Answer 1

正在复制您的值，未存储对原始编辑器对象的引用。

您在使用 strings 和 int 时使用了值类型。由于您将编辑器对象传递给它并直接从中访问值，因此您的 vm 和 knockout 正在复制值，而不是对编辑器对象的引用。

我会说你应该使用虚拟机来完成你所有的工作，如果你想访问数据，从虚拟机中提取它。如果你需要保存数据，那么我会把数据从虚拟机中拉到另一个对象中，然后传递给服务器。

如果您提供更多有关您要完成的工作的详细信息，我将能够更好地提供示例。

Answer 2

使用括号：

editor.brushSize(15);

Answer 3

理想情况下，在使用淘汰赛时，最好使用"observables all the way down"；即，如果您想要查看所有对象的实时更新以使用属性的可观察对象。

function My_editor()
{
    this.brushSize = ko.observable(10);
    this.activeColor = ko.observable('#ff0000');
};
var editor = new My_editor();

然后在您的 AppViewModel 中：

function AppViewModel(ed)
{
//Either this:        
    this.brushSize = ed.brushSize; //The editor's observables are shared between both ViewModels
    this.activeColor = ed.activeColor;

//OR  (my preference)
    this.editor = ed;
}
ko.applyBindings(new AppViewModel(editor));

就我个人而言，我更喜欢第二种方法，这样您就可以自由地向编辑器 ViewModel 添加属性，而无需向 AppViewModel 添加更多代码。

如果您不能或不想让 My_Editor viewModel 的属性可观察，您可能必须找到一种方法在 VM 更改时手动触发更新，（即当您设置 editor.brushSize = 15，你会调用一行代码来导致 AppViewModel 的可观察对象更新），但这很老套，并没有真正正确地利用 KO，所以我真的建议让 My_editor 可观察。

Answer 4

所以，无意中，我找到了最简单的解决方案：Extenders (http://knockoutjs.com/documentation/extenders.html).

我需要在 AppViewModel 之前添加类似的内容：

ko.extenders.updateEditor = function(target, option)
{
  target.subscribe(function(newValue)
  {
    //console.log(option,newValue);
    editor[option] = newValue;
  });
  return target;
};

... 并像这样修改 AppViewModel：

this.brushSize = ko.observable(ed.brushSize).extend({ updateEditor: 'brushSize' });
this.activeColor = ko.observable(ed.activeColor).extend({ updateEditor: 'activeColor' });

瞧！ 'editor' 对象属性现在已正确更新！感谢大家的参与。

如何更新 knockout.js 中的对象属性值

How to update object attributes values in knockout.js

javascript

knockout.js