dynamic binding

[NagarRahul]

Hi, I want to pass binding like that data-bind="value: {{Building}}" data-bind="value: {{Building}}.{{Device}}.Temp" data-bind="value: {{Building}}.{{Device}}.{{Temp}}" data-bind="value: Building.Device.Temp"

How we can handle these conditions and how we can create the dynamic model? @haru01 @steveluscher @rampion @schinckel @aaronblohowiak @

[webketje]

function Building(name, devices = []) {
  this.name = name;
  this.devices = devices.map((device, index) => Object.assign(
    { index: index },
    device,
    temps: device.temps.map((temp, index) => ({
       index: index,
       value: temp
    }))
  ));
}
function App(buildings, initialSelection) {
  this.buildings = (buildings || []).map((building, index) => Object.assign({ index: index }, buiding));
  this.current = {
    building: ko.observable(this.getBuildings(initialSelection.building))
  };
  this.current.device = ko.observable(this.getDevices(initialSelection.device));
  this.current.temp = ko.observable(this.getTemps(initialSelection.temp));
  this.current.fullId = ko.computed(function() {
    return [this.current.building(), this.current.device(), this.current.temp()].join('.');
  }, this);

  ['getBuildings', 'getDevices','getTemps'].forEach(method => this[method] =  this[method].bind(this));
}
App.prototype.getBuildings = function(index) {
  if (typeof index === 'number')  return this.buildings[index];
  return this.buildings;
};
App.prototype.getDevices = function(index) {
  const building = this.getBuildings(this.current.building());
  if (typeof index === 'number')  return building && building.devices[index];
  return building && building.devices;
};
App.prototype.getTemps = function(index) {
  const device = this.getDevices(this.current.device());
  if (typeof index === 'number')  return device && device.temps[index];
  return device && device.temps;
};

const initialSelection = { building: 0, device: 0, temp: 0 };

ko.applyBindings(new App(
  [
    new Building('Building 1', [
       { name: 'device0', temps: [15, 24, 13] },
       { name: 'device3', temps: [18, 29, 3] }
    ]),
    new Building('Building 2', [
       { name: 'device1', temps: [15, 24, 13] },
       { name: 'device2', temps: [18, 29, 3] }
    ]),
    new Building('Building 3', [
       { name: 'device5', temps: [15, 24, 13] },
       { name: 'device7', temps: [18, 29, 3] }
    ]),
  ], initialSelection), document.body);

<select data-bind="value: current.building, options: getBuildings(), optionsText: 'name', optionsValue: 'index'"></select>
<select data-bind="value: current.device, options: getDevices(), optionsText: 'name', optionsValue: 'index'"></select>
<select data-bind="value: current.temp, options: getTemps(), optionsText: 'value', optionsValue: 'index'"></select>
<span class data-bind="text: current.fullId"></span>

[NagarRahul]

Thanks for the reply but this is not working. I have to try and I am getting this error.

And one more thing I want to bind all there or maybe four data models with a single label. like this-

<label data-bind="value: {{Building}}.{{Device}}.{{Temp}}"></label>

Building = "ABC"; Building = "XYZ"; Device = "AHU"; Device = "HVAC"; Temp = "abc"; Temp= 12 Temp = 2.25

these parameters change according to the configuration. Because I have a data with JSON like this-

{ "Variable": "ABC.AHU.abc", "value": "574" }

So, I am finding the match and get the value for the Matching string. Now the output after render the html like this-

**574**

@mbest @webketje @haru01 @steveluscher

[webketje]

@NagarRahul I've updated my snippet. The full name is in fullId. I didn't think Knockout wouldn't add prototype methods to the context, so I fixed that & a few typo's. If you have further questions, please ask on StackOverflow, this is not the place. And please close #2578

[NagarRahul]

building.devices are return undefined

[webketje]

Sorry, I didn't test the code, i reupdated it and it should work now

[NagarRahul]

@webketje No it's not working