Question

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

ViewModel：

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中分开，比如说。我曾试图以多种方式做到这一点，但遗憾的是没有任何成功。 有没有人知道如何将这样的对象绑定到单独的跨度？

我已经尝试过并且不适合我：

方法1：

    <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>

方法2：

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

方法3：

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

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

Answer 1

或许改变这个：

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

到此：

myObject = new model.MyModel(),

修改

演示here。

编辑2：

请注意，您无法像这样更新您的观察信息：

myObject.property1 = data.test;

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

myObject.property1(data.test);

Answer 2

你可以在父HTML DOM中使用data-bind =“with：Modelobject”，这将使你的每个对象属性都可观察

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

2 个答案: