Question

我遇到一个问题，我的viewmodel有一个包含可观察属性的可观察对象。当我尝试访问这些属性时，它们不会显示。但是，我可以看到所有带有值的属性在DOM中都可以使用Knockout chrome扩展名显示。

我的代码如下：

视图模型：

self.device=ko.observable();       
self.device(querydevice.query({"url": self.url, "ref":self.ref}));

查询代码：

define(['jquery','knockout','hsd'], function ($,ko, device) {
return{ 
query:function (params) {
        var hsdevice=ko.observable();   
        self.url=params.url;
        self.ref=params.ref;
        var controlData = $.getJSON(self.url + "/JSON?request=getcontrol&ref=" + self.ref);
        var statusData = $.getJSON(self.url + "/JSON?request=getstatus&ref=" + self.ref);
        $.when(controlData, statusData).done(function (_cdata, _sdata) {
            var data = $.extend(_cdata[0], _sdata[0]);
            hsdevice(new device(data));              
        });

        return hsdevice;
    }};
});

设备对象：

define(['knockout'], function (ko) {

return function device (data){
    var self=this;
    self.deviceName = ko.observable(data.Devices[0].name);
    self.value = ko.observable(data.Devices[0].value);
    self.status =ko.observable(data.Devices[0].status);
    self.controlPairs = ko.observableArray();
    ko.utils.arrayPushAll(self.controlPairs, data.ControlPairs);

     };
});

这就是我看到的回复：

" device": Object
controlPairs: Array[2]
deviceName: "Garage Hall Light"
status: "Off"
value: 0

在我的HTML中，我有这个：

<span class="tile-title align-" data-bind="with: device.deviceName"></span>

我也尝试过使用data-bind：“text：device（）。deviceName”，但这也不起作用。什么都没有显示。但是，我可以访问viewmodel上的可观察属性。唯一的区别是它们是没有子绑定的单级属性。所以我能够在我的html中看到类似self.test（“test”）的内容，而不是带有嵌套数据包的self.device。

任何想法我做错了什么？

谢谢！

Answer 1

看起来你正在使用jquery promises。您需要做的是返回$.when

类似

define(['jquery','knockout','hsd'], function ($,ko, device) {
return{ 
query:function (params) {   
        self.url=params.url;
        self.ref=params.ref;
        var controlData = $.getJSON(self.url + "/JSON?request=getcontrol&ref=" + self.ref);
        var statusData = $.getJSON(self.url + "/JSON?request=getstatus&ref=" + self.ref);
        return $.when(controlData, statusData).done(function (_cdata, _sdata) {
            var data = $.extend(_cdata[0], _sdata[0]);
            return new device(data);              
        });
    }};
});

然后你最终得到这样的东西。

querydevice.query({"url": self.url, "ref":self.ref})
.when(function(data){
   self.device(data);
   return true;
});

Answer 2

感谢Nathan的代码贡献。我终于可以使用：

访问html中的嵌套属性

<!-- ko with: device -->
<!-- /ko -->

然后数据绑定到我需要的属性。

Knockout Nested Bindings - 在DOM中可见，但不会显示

2 个答案: