Question

我是knockout.js的新手......

我有一个对象：

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

这是一种排序或绘图工具。这是Knockout View-Model：

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开发人员工具检查我的对象＆＃39 ; s州。

一块html：

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

另外，如果我在控制台中更改了brushSize，它在界面中并没有更新＆amp;昏死。我正在使用：

editor.brushSize = 15;

Answer 1

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

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

我会说你应该使用vm完成所有工作，如果你想访问数据，请从vm中提取数据。如果您需要保存数据，那么我会将数据从vm中提取到另一个对象并将其传递给服务器。

如果你提供一些关于你想要完成的事情的更多细节，我将能够更好地提供一个例子。

Answer 2

使用括号：

editor.brushSize（15）;

Answer 3

理想情况下，当使用淘汰赛时，如果你一直使用＆＃34; observables，那就最好了＃34 ;;即如果您想要查看所有对象的实时更新，请使用属性的可观察对象。

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的可观察对象更新）但这非常hacky并且没有真正使用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中的对象属性值

4 个答案: