Nested Observable Object in Knockout

Question

I have an Object having two properties one string and another object. I am unable to create observable on object correctly using KnockOutJS. I do not know what mistake I am performing.

Here is my exact requirement: When I hover on Data Source it should show me all the configured DataSources and once I click on any one of them it Data Source should change to selected 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>

Fiddle : http://jsfiddle.net/techphernalia/LDpgL/9/

Problem solved

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>

Tanner · Accepted Answer · 2014-06-18 10:21:50Z

1

I've updated your fiddle, modifying the update of the observable as well as the logic to show the selected data source on the button:

Updated JS Fiddle

Updated selection function:

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

Updated HTML with additional simple span to output the selection:

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

edited Jun 18, 2014 at 10:21

answered Jun 18, 2014 at 9:38

Tanner

22.8k9 gold badges70 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GôTô Over a year ago

There was one (DataSource)

GôTô Over a year ago

Can't blame you since there is a DataSource prop and a DataSource s prop :)

Durgesh Chaudhary Over a year ago

You are creating SelDataSource and storing Selected DataSource over there. It is one of the property and I have multitude of them. So is it possible to access View.DataSource and not SelDataSource. Like we have observableArray for array and observable for valuetype, is there something for Object types as well?

Durgesh Chaudhary Over a year ago

Thanks Mate. It worked. Thanks a lot. So my mistake was in setting them rather than self.View.DataSource(new DataSource(DS)) I have to use self.View.DataSource(DS)

Tanner Over a year ago

@DurgeshChaudhary DS is already the correct type so doesn't need to be new-ed up

Collectives™ on Stack Overflow

Nested Observable Object in Knockout

1 Answer 1

Updated JS Fiddle

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related