Как да получите избрана опция от менюто от knockout.js observableArray?

Чувствам, че ми липсва нещо много основно, но не мога да накарам падащото меню да работи, както очаквам, използвайки Knockout.js.

Имам набор от обекти, които искам да представя в меню, и трябва да намеря избраната опция и да я публикувам на сървъра. Мога да накарам менюто да се изобрази, но изглежда не мога да получа стойността на избрания елемент. Моят модел на изглед изглежда така:

function ProjectFilterItem( name, id ) {
    this.Name = name;
    this.Id   = id;
}

function FilterViewModel() {
    this.projectFilters = ko.observableArray([
        new ProjectFilterItem( "foo", "1" ),
        new ProjectFilterItem( "bar", "2" ),
        new ProjectFilterItem( "baz", "3" )
    ]);
    this.selectedProject = ko.observable();
}

ko.applyBindings( new FilterViewModel() );

и моята маркировка на изглед изглежда така:

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        options:        projectFilters,
        optionsText:    'Name', /* I have to enquote the value or I get a JS error */
        optionsValue:   'Id',   /* If I put 'selectedProject here, nothing is echoed in the span below */
        optionsCaption: '-- Select Project --'
    "
></select>

<b>Selected Project:</b> <span data-bind="text: selectedProject"></span>

Как да накарам избрания елемент от менюто да се покаже в диапазона и да се публикува на сървъра? (Предполагам, че наблюдаемото, което изобразявам в span, е същото, което бих публикувал.) Имам ли нужда от друго свойство в ProjectFilterItem, като this.selected = ko.observable(false);? Ако е така, как бих го декларирал като цел на стойността?


drop-down-menu select option knockout.js
person Val    schedule 05.11.2012    source източник

Отговори (1)


arrow_upward
16
arrow_downward

Просто трябва да използвате с value обвързване, за да обвържете избраната стойност:

От options документацията:

Забележка: За списък с множество избори, за да зададете кои от опциите са избрани или да прочетете кои от опциите са избрани, използвайте свързването selectedOptions. За списък с единичен избор можете също да четете и записвате избраната опция, като използвате свързване на стойност.

Във вашия пример:

<select 
    id        = "projectMenu"   
    name      = "projectMenu"
    data-bind = "
        value: selectedProject,
        options:        projectFilters,
        optionsText:    'Name',
        optionsValue:   'Id',
        optionsCaption: '-- Select Project --'
    "
></select>

Вижте Демо.

person nemesv    schedule 05.11.2012
comment
д'о! Пропуснах това в документа -- концентрирах се върху секцията с параметри в долната част и прочетох точно след бележката в горната част. Благодаря, проблемът е решен! - person Val; 06.11.2012
comment
Благодаря за демонстрацията, много ми помогна! - person WhatsInAName; 22.08.2013