Pfthb

In my root viewmodel I have observable array of objects.

I'd like to have drop-down list that allows user to select element of that list (lets call it current) and then be able to bind some property of selected object to some edit box.

So, to the user this should look like heshe can "focus" on some particular object (using combo-box) and then edit it's properties.

Right now in my html I have something like this:

<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>

... for drop-down list, and:

<input data-bind="value: current.property"/>

... for property that should be edited.

Meanwhile, in js I do something like this:

function ObjectViewModel(p) 
 var self = this;
 self.property = ko.observable(p);


function AppViewModel() 
 var self = this;
 self.objects = ko.observableArray([
 new ObjectViewModel("id1"),
 new ObjectViewModel("id2")
 ]);
 self.current = ko.observable();


ko.applyBindings(new AppViewModel());

However, when I select value inside drop-down list nothing happens.

I suspect that I am not managing current property of AppViewModel correctly.

What is the correct way to implement this in knockout?

You had 2 problems with your code:

1. current is observable so to evaluate value you have to use "()".


2. "current().property" wont be accessible unless current is set. so to avoid failure put a check.
   Hope this will help.

function ObjectViewModel(p) 
 var self = this;
 self.property = ko.observable(p);


function AppViewModel() 
 var self = this;
 self.objects = ko.observableArray([
 new ObjectViewModel("id1"),
 new ObjectViewModel("id2")
 ]);
 self.current = ko.observable();


ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>


<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->

Just to make an improvement to Amit Bhoyar's answer (I think it's a thing of likes) I suggest you to use the with binding instead of if binding so you don't have to worry about call current().property to bind the value, with binding create the right context of current selected item and also ensure that the html block inside of it just get render with true-y values of current observable. I also changed the value binding to textInput binding to get a better application response to changes on the text input.

function ObjectViewModel(p) 
 var self = this;
 self.property = ko.observable(p);


function AppViewModel() 
 var self = this;
 self.objects = ko.observableArray([
 new ObjectViewModel("id1"),
 new ObjectViewModel("id2")
 ]);
 self.current = ko.observable();


ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>


<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->