JQuery UI Multiselect с Knockout JS - привязка данных с помощью вспомогательного плагина

Question

Я пытаюсь реализовать JQuery UI Multiselect с привязкой KnockoutJS. Я думаю, что это не может быть сделано изначально, поэтому этот плагин был сделан.

Я использую плагин. Я создаю свой множественный выбор в коде php, но вывод HTML это:

<select id="multiselectpoc" data-bind="multiselect  : { config : multiSelectConfig,
            options: _categories,
            optionsText: '_name',
            optionsValue: '_id',
            value: selectedCategory,
            optionsCaption: 'CATEGORY'}" title="Basic example" multiple="multiple" name="example-basic" size="5" style="display: none;">
        </select>

Я знаю, что создание его в PHP не проблема, потому что я создаю другие <select>Это в php, которые не являются JQueryUI Multiselects, и привязки данных для них работают.

Вот моя модель просмотра (я использую машинопись):

class SearchFilterViewModel {
    multiSelectConfig = {};
    _countriesList = [];
    _regionsList = [];
    _countries = ko.observableArray();
    _regions = ko.observableArray();
    _categories = ko.observableArray([
        new Category(name="Meat-Free Meat", 1),
        new Category(name="Dairy-Free Dairy", 2),
        new Category(name="Confectionery", 3),
        new Category(name="Baking", 4),
        new Category(name="Dessert", 5)
    ]);
    selectedCountry = ko.observable();
    selectedCity:  KnockoutObservable<string> = ko.observable('');
    selectedCategory:  KnockoutObservable<string> = ko.observable('');

    constructor(allCountries) {
        for (var index = 0; index < allCountries.length; index++) {
            this._countriesList.push(allCountries[index]);
        }
        this._countries(this._countriesList);
        this.selectedCountry.subscribe(this.updateCities.bind(this))
    }

    updateCities(geonameId) {
        var self = this;
        self._regionsList = [];
        $.ajax({
            url: `http://api.geonames.org/children?geonameId=${geonameId}&username=elion`
        }).then(function(allCitiesXML) {
            var allCitiesJSON = xml2json(allCitiesXML);
            var allCities = JSON.parse(allCitiesJSON);
            for (var index = 1; index < allCities.geonames.length - 1; index++) {
                self._regionsList.push(allCities.geonames[index].geoname);
            }
            self._regions(self._regionsList);
            });
    }
}

class Category {
    _name:  KnockoutObservable<string>;
    _id:    KnockoutObservable<number>;

    constructor(name, id) {
        this._name = ko.observable(name);
        this._id = ko.observable(id);
    }
}



$(document).ready(function() {
    var _searchFilterViewModel: SearchFilterViewModel = new SearchFilterViewModel(allCountries);
    var _searchFilterForm = $("#find-vegan-products-page").find("form")[0];
    ko.applyBindings(_searchFilterViewModel, _searchFilterForm);
    $('.select-multiple').each(function(i, obj) {
        //obj[i] gets each element inside the div
        $(this).multiselect();
    })
});

Этот вопрос в основном о том, как настроить пустой multiSelectConfig объект в модели представления. Когда я запускаю страницу в веб-браузере, вывод HTML в <select> сейчас много <li> теги, которые содержат довольно много кода JQuery UI MultiSlect, но важно то, что внутри каждого <option></option> является <span>[object Object]</span> который внутри каждого <li> тег. Есть такое же количество <li> теги как категории, что заставляет меня думать, что привязка данных работает. Мне просто нужно нажать на [объект объекта], чтобы получить свойства (category.name). Как я могу это сделать?

Answer 1

Вам, вероятно, следует пройтись по учебникам KnockoutJS. AFAICT Вы в настоящее время не используете его.

Обработчик привязки отвечает за вызов multiselect(...) на вашем DOM. Вы не должны называть это сами, как сейчас. Вместо этого вам нужна модель представления, которая передает всю информацию в пользовательский обработчик привязки.

Обработчик привязки ожидает config в качестве входных данных, и ваше представление говорит, что ваша модель представления имеет multiSelectConfig свойство, которое содержит эту информацию. Обработчик привязки, вероятно, дает сбой, потому что вашей модели представления не хватает этого свойства.

Иными словами, ваш обработчик привязки предполагает, что ваши модели представлений имеют наблюдаемые (или, по крайней мере, свойства) с именем:

• multiSelectConfig
• _categories с _name а также _id собственность каждого
• selectedCategory

Вы не показали свой код модели представления или код начальной загрузки KO, но он вам понадобится, чтобы все заработало. Например:

$(function(){
    var vm = {
        multiSelectConfig: { /* config here */ },
        _categories: [{_id: 1, _name: "test"},
        selectedCategory: ko.observable()
    };
    ko.applyBindings(vm);
});

Этот код просматривает множество важных понятий, например, функции конструктора для моделей представления, наблюдаемые массивы, сопоставление вашего json с моделью представления и т. Д., Поэтому снова я рекомендую проверить веб-сайт KO и его учебные пособия.

Answer 2

Это стилизовано с использованием начальной загрузки из-за моего CSS, это не нужно и не имеет каких-либо зависимостей.

<div class="input-group-lg input-group-xl">
     <select class="form-control needsclick" data-bind="options: ovariesJSON, selectedOptions: RightOvaryIDs, optionsText: 'Name', optionsValue: 'ID', optionsCaption: 'Select'" multiple="true"></select>
</div>

Ссылка: http://knockoutjs.com/documentation/selectedOptions-binding.html

Их пример:

<p>
    Choose some countries you'd like to visit: 
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
</p>

<script type="text/javascript">
    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),
        chosenCountries : ko.observableArray(['Germany']) // Initially, only Germany is selected
    };

    // ... then later ...
    viewModel.chosenCountries.push('France'); // Now France is selected too
</script>