Нокаут : привязать объект данных с помощью опции выбранного элемента

#jquery #cordova #knockout.js

#jquery #кордова #knockout.js

Вопрос:

Я использую KO MVVM для привязки данных вместе с Phonegap (работает в эмуляторе ripple), но я столкнулся с проблемой.

Я пытаюсь привязать объект выбранного значения в select element.

Мой код:

HTML

 <select data-bind="options: pro(), 
                   optionsText: 'value', 
                   optionsValue: this, 
                   value: province">
</select>
  

JS

 function screen1ViewModel()
{
    var self = this;
    self.pro = ko.observableArray();
    self.province = ko.observable();
}

$(document).ready(function () {
    var vm = new screen1ViewModel();

    var pro = [{
        "symbol": "AB",
        "value": "AB - Alberta"
    },
    {
        "symbol": "BC",
        "value": "BC - British Columbia"
    }];

$.each(pro, function(index, item) {
                vm.pro().push(item);
            });
});

console.log(vm.province().symbol);
console.log(vm.province().value);
  

Например, если я выбираю AB - Alberta из списка выбора, мне нужны и другие ключи.

Мы будем признательны за любую помощь.

Комментарии:

1. ДА. Ошибка без перехвата: не удается проанализировать привязки. Сообщение: Ошибка ссылки: недопустимая левая сторона при назначении; Значение привязки: options: pro(), optionsText: ‘значение’, optionsValue: this, значение: провинция

Ответ №1:

Вам просто нужно удалить optionsValue: this, (хотя, как ни странно, он работает в демо версии KO 3.0 и выше)

Поскольку поведение по умолчанию заключается в том, что Knockout использует весь объект целиком, так как указан параметр value if there is no optionsValue options, это именно то, что вам нужно:

 <select data-bind="options: pro, optionsText: 'value', value: province"></select>
  

Демонстрационный файл JSFiddle.

Комментарии:

1. Это была проблема с версией KO. Отлично

Ответ №2:

Кажется, что ваша модель представления нарушена. Вот решение

Вид

 <select 
    data-bind="
        options: pro, 
        optionsText: 'value', 
        optionsValue: 'symbol', 
        optionsText: 'value'
        value: province
">
</select>
  

ViewModel

 function screen1ViewModel()
{
    var self = this;
    self.pro = ko.observableArray();
    self.province = ko.observable();

    self.GetValue = function(){
        console.log(self.province())
    }
}

$(document).ready(function () {
    var vm = new screen1ViewModel();


    var pro = [{
        "symbol": "AB",
        "value": "AB - Alberta"
    },
    {
        "symbol": "BC",
        "value": "BC - British Columbia"
    }];

    vm.pro(pro)
    ko.applyBindings(vm)
});
  

ДЕМОНСТРАЦИЯ

Будет полезна документация .

Редактировать:

Измените функцию

 self.GetValue = function(){
    var obj = {}
    ko.utils.arrayForEach(self.pro(),function(item){
        if(item.symbol ==self.province()){
            obj = item
        }
    })
    console.log(obj)
}
  

ДЕМОНСТРАЦИЯ

Комментарии:

1. Таким образом, это работает, но мне нужно «optionsValue: this» в select element, чтобы я мог получить ключи SYMBOL и VALUE (и другие, если таковые имеются). Спасибо

2. То есть вы имеете в виду, что нет способа напрямую сохранить весь объект в «self.province = ko.observable()» . 🙁

3. @Amritpalsingh конечно, есть способ, смотрите его в моем ответе.