knockout.js - Nested Observable Object in Knockout -

knockout.js - Nested Observable Object in Knockout -

i have object having 2 properties 1 string , object. unable create observable on object correctly using knockoutjs. not know error performing.

here exact requirement: when hover on data source should show me configured datasources , 1 time click on 1 of them data source should alter selected info 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) { homecoming 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>

i've updated fiddle, modifying update of observable logic show selected info source on button:

updated js fiddle

updated selection function:

self.selds = function (ds) { self.hideds(); self.view.datasource(ds); };

updated html additional simple span output 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>

knockout.js observable