2013-05-03 7 views
0

Я борюсь с привязкой опций для knockout.js. Когда я не использую опции связывания, как этотПараметры привязки нокаута, параметры не отображаются

<select id="AddProductSelect" name="chosenSpaProduct"> 
    <!-- ko foreach: Spa.SpaProductList --> 
     <option data-bind="text: Name" ></option> 
    <!-- /ko --> 
</select> 

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

<select data-bind="options: Spa.SpaProductList, optionsText: 'Name'"></select> 

ничего не отображается в элементе select.

Spa.SpaProductList - это массив объектов. Любые идеи о том, что я делаю неправильно?

Edit: Соответствующие JS:

$(document).ready(function() { 
     var initialData = @Html.Raw(Json.Encode(Model)); 
     viewModel = new ViewModel(initialData); 
     ko.applyBindings(viewModel); 
     viewModel.ViewLoaded(true); 

     function ViewModel(initialData) { 
      var self = this; 
      ko.mapping.fromJS(initialData, {}, self); 
      (...) 
     } 
    }  
+0

Вы можете оставить соответствующий JavaScript? Модель, инициализация модели и код applyBindings(). –

+0

Поскольку на основе кода, который вы предоставили, это должно работать, как показано в этом jsfiddle. http://jsfiddle.net/vYdVS/ Что оставляет меня с мыслью, что это связано с вашей ссылкой на 'Spa.' –

+0

@FeistyMango добавил js, который вы просили. Я думаю, что вы правы в отношении спа-салона, но не знаете, как отлаживать. Какие-нибудь советы и трюки? Я пробовал с $ root.Spa ... чтобы убедиться, что Im в корне ViewModel, но это не помогло. –

ответ

0

Похоже, вы пропустили параметр optionsValue. Из knockout.js documentation:

Если вы хотите, чтобы пользователь мог выбрать из массива произвольных объектов JavaScript (не только строк), то увидеть optionsText и optionsValue параметров

Вот пример они дайте:

<select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry"></select> 
+0

Атрибут value используется для отслеживания того, какое значение выбрал пользователь и не требуется для отображения списка. Jsfiddle в комментарии Фейсти (под вопросом) показывает, что он работает без него. –

0

Я думаю, что у вас отсутствуют параметрыText.

Этот пример работает: (http://jsfiddle.net/geremora/6VmCh/)

HTML:

 <select data-bind="options: cars, 
        optionsText: 'brand', 
        value: selectedCar, 
        optionsCaption: 'Select...'"></select> 

JS:

var Car = function (brand, model) { 
    this.brand = brand; 
    this.model = model; 
}; 

var viewModel = { 
    cars: ko.observableArray([ 
    new Car("Audi", "A3"), 
    new Car("Ford", "Ranger"), 
    new Car("Fiat", "500")]), 
    selectedCar: ko.observable(), 
}; 

viewModel.selectedCar.subscribe(function (data) { 
    console.log(data) 
}); 

ko.applyBindings(viewModel); 
+0

У меня есть атрибут optionsText в моем коде. :) –

+0

Это правда. К сожалению, должна быть небольшая ошибка. Можете ли вы поместить код в jsFiddle или plunker ?. – Gere

Смежные вопросы