Knockout JS如何绑定对象html绑定的observable答案

【问题标题】：Knockout JS how to bind observable of object html bindKnockout JS如何绑定对象html绑定的observable
【发布时间】：2014-06-09 15:18:02
【问题描述】：

我需要绑定一个 ko.observable 到 cshtml 视图，该 ko.observable 包含我定义的对象。为了澄清，让我们用一小段代码来说明：

视图模型：

define('vm.test',
['ko', 'model'],
function(ko, model) {

    var
        myObject = ko.observable(new model.MyModel()),

        someFunction = function() {
            // Here goes some code which obtains object data
            myObject.property1 = data.test;
            myObject.property2 = data.test2;
            myObject.property3 = data.test3;
        };


    return {
        myObject: myObject,
        someFunction: someFunction 
    };
});

型号：

define('model.myModel',
['ko'],
function (ko) {

    var
        MyModel= function () {
            var self = this;
            self.property1= ko.observable();
            self.property2= ko.observable();
            self.property3= ko.observable();
            self.isNullo = false;
            return self;
        };

    MyModel.Nullo = new MyModel()
        .property1('')
        .property2('')
        .property3('');
    MyModel.Nullo.isNullo = true;

    return MyModel;
});

我想要实现的是将 myObject 的每个属性绑定到单独的，比如说，在 HTML 中。我尝试以多种方式做到这一点，但不幸的是没有任何成功。 有人知道如何将这样的对象绑定到单独的跨度吗？

我已经尝试过但对我不起作用的方法：

方法一：

    <div data-bind="with: myObject">
        <span data-bind="text: $data.property1"></span>
        <span data-bind="text: $data.property2"></span>
        <span data-bind="text: $data.property3"></span>
    </div>

方法二：

    <span data-bind="text: myObject.property1"></span>

方法3：

    <span data-bind="text: myObject().property1"></span>

这些都不起作用。与视图模型的绑定以及整个结构都有效，因为我在 vm 中使用的其他属性（简单的 observables 或 observableArrays）与视图绑定没有任何问题。更重要的是，如果我从视图模型中编写控制台 myObject 的内容，它会填充我想要的值。但是，这些值并未分配给视图。

【问题讨论】：

标签： javascript mvvm knockout.js binding

【解决方案1】：

也许会改变这个：

myObject = ko.observable(new model.MyModel()),

到这里：

myObject = new model.MyModel(),

编辑：

演示here.

编辑 2：

请注意，您不能像这样更新您的 observables：

myObject.property1 = data.test;

但是，您需要进行函数调用：

myObject.property1(data.test);

【讨论】：

感谢您的回答，但不幸的是，这也不起作用。或者我不知道如何从 html 端正确调用它？我已经尝试了上面介绍的所有三种方法。
那你又做错了。请将小提琴视为概念证明。
其实你是对的。如果我在初始化期间创建 MyModel 类型的对象并在该位置分配其字段的值，则一切正常（我刚刚检查过），我的意思是： myObject= new model.MyModel().property1('343434' ) 然后绑定到 span as data-bind="text: myObject.property1" 当我想更改已初始化的先前变量的值时会出现问题 - 它不会更新。
就是这样 :) 愚蠢的我.. 正确的绑定是 div data-bind="with: myObject" 并且在它的内部直接绑定到 myObject 属性的名称。感谢您的帮助！

【解决方案2】：

您可以在父 HTML DOM 中使用 data-bind = "with:Modelobject" 这将使您的每个对象属性都可观察

【讨论】：