Question

我有一个Object，它有两个属性，一个字符串和另一个对象。我无法使用KnockOutJS正确创建对象上的observable。我不知道我在做什么错误。

以下是我的确切要求：当我将鼠标悬停在Data Source上时，它应该显示所有已配置的数据源，一旦我点击其中任何一个，Data Source就应该更改为选定的数据源。

JS

function View(data) {
    this.Name = ko.observable(data.Name);
    console.log("View : " + this.Name());
    this.DataSource = ko.observable();
    if (data.DataSource) {
        this.DataSource(new DataSource(data.DataSource));
        console.log("View.DataSource.Name" + this.DataSource.Name());
    }
}

function DataSource(data) {
    console.log(JSON.stringify(data));
    this.Name = ko.observable(data.Name);
    console.log("DataSource : " + this.Name());
}

function ViewController() {
    var self = this;

    self.View = new View({
        Name: 'Untitled',
        DataSource: null
    });
    self.View.DataSource(new DataSource({}));

    self.DataSources = ko.observableArray([]);

    self.HideDS = function () {
        console.log("Hide");
        jQuery("#SelectDataSource").hide();
    }
    self.ShowDS = function () {
        console.log("Show");
        jQuery("#SelectDataSource").show();
    }
    self.SelDS = function (DS) {
        self.HideDS();
        self.View.DataSource(new DataSource(DS));
    };

    var GetDataSourcesSuccess = function (data) {
        self.DataSources(jQuery.map(data, function (item) {
            return new DataSource(item);
        }));
    }
    GetDataSourcesSuccess([{
        Name: "DS A"
    }, {
        Name: "DS B"
    }])
}
ko.applyBindings(new ViewController());

HTML

<button type="button" class="btn btn-default" data-bind="event: { mouseover: ShowDS } , text: View.DataSource.Name == undefined? 'Data Source' : View.DataSource.Name "></button>
<div class="btn-group btn-group-sm hidden-selector" id="SelectDataSource" data-bind="foreach: DataSources , event: { mouseover: ShowDS , mouseout: HideDS }" style="display:none;">
    <button type="button" class="btn btn-default" data-bind="text: Name, click: $parent.SelDS"></button>
</div>

小提琴：http://jsfiddle.net/techphernalia/LDpgL/9/

问题解决了

JS

self.SelDS = function (DS) {
    self.HideDS();
    self.View.DataSource(new DataSource(DS));
};

HTML

<button type="button" class="btn btn-default" data-bind="event: { mouseover: ShowDS } , text: View.DataSource().Name()? View.DataSource().Name() : 'Data Source' "></button>

Answer 1

我已经更新了你的小提琴，修改了observable的更新以及在按钮上显示所选数据源的逻辑：

Updated JS Fiddle

更新了选择功能：

self.SelDS = function (DS) {
    self.HideDS();
    self.View.DataSource(DS);
};

使用额外的简单范围更新HTML以输出选择：

<button type="button" class="btn btn-default" 
        data-bind="event: { mouseover: ShowDS } , 
                   text: View.DataSource().Name() ? 
                         View.DataSource().Name : 
                         'Data Source' "></button>
...
<span data-bind="text: View.DataSource().Name() ? 
                       View.DataSource().Name : 
                       'No Selection Made'"></span>

Knockout中的嵌套Observable对象

1 个答案:

Updated JS Fiddle