Обновить поле с помощью jquery, не обновлять наблюдаемый

Question

Я хочу сказать привет сообществу stackru.

Я только начал использовать нокаут несколько дней назад.

Хорошо, я использую его для создания динамического меню для CMS, над которой я работаю.

Вот код: http://jsfiddle.net/dnlgmzddr/HcRqn/

Проблема в том, что когда я выбираю элемент из поля выбора, поле ввода обновляется, как я ожидаю, но наблюдаемое не отражает изменения. Из-за этого кнопка добавления не активна.

Что мне не хватает? Как я могу это исправить?

Спасибо.

Answer 1

Когда вы заполняете поле url, вам нужно будет вызвать событие change, чтобы получить наблюдаемое для обновления. Итак, вы можете сделать:

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

Другой вариант, который больше соответствует духу нокаута, - использовать привязку для вашего выбора. В этом случае вы, вероятно, захотите заполнить наблюдаемое этим значением, а затем использовать ручную подписку, чтобы по умолчанию отформатировать значение в поле ввода.

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

Затем свяжите свой выбор с selectedUrl:

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

Вот пример: http://jsfiddle.net/rniemeyer/HcRqn/21/

Вы также можете отменить дополнительную заметную и ручную подписку, если "значением" ваших опций была ссылка.

Answer 2

Я не вижу нигде в вашем коде, где вы фактически активируете кнопку, когда выбрано поле. Так что я могу что-то упустить, но просто включите кнопку изменения. Как следующее:

function LoadMenu() {
    $("#pagedList").change(function () {
        var id = $(this).val();
        $("#url").val('/pages/' + id);
        // remove the disabled attribute here
        $('button.space').removeAttr('disabled');
    });
}