Question

I want to say hello to the stackoverflow community.

I’ve just started using knockout a few days ago.

Right know I’m using it to make a dynamic menu builder for a CMS I’m working on.

Here is the code: http://jsfiddle.net/dnlgmzddr/HcRqn/

The problem is that when I choose an element from the select box, the input field update as I expect, but the observable doesn’t reflect the change. Because of that, the add button is not enabled.

What am I missing? How can I fix it?

Thank you.

Answer 1

When you populate the url field, you would need to trigger the change event to get the observable to be upated. So, you could do:

$("#url").val('/pages/' + id).change(); 

Another option though that is more in the Knockout spirit is to use a binding on your select. In this case, you would likely want to populate an observable with that value, then use a manual subscription to default the formatted value into the input field.

this.itemUrl = ko.observable();
this.selectedUrl = ko.observable();
this.selectedUrl.subscribe(function(newValue) {
    if (newValue) {
        this.itemUrl("/pages/" + newValue);                
    }
}, this);

Then, bind your select to selectedUrl:

    <select id="pagedList" data-bind="value: selectedUrl">
        <option value=""><option>
        <option value="test">Test</option>
    </select>

Here is a sample: http://jsfiddle.net/rniemeyer/HcRqn/21/

You could also eliminate the extra observable and manual subscription if the “value” of your options was the url.