2

我正在尝试使用 KnockoutJS 绑定来实现jQuery UI Multiselect 。我想它不能在本地完成，这就是制作这个插件的原因。

我正在使用插件。我在 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 的其他 's，并且它们的数据绑定有效。

这是我的视图模型（我使用打字稿）：

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在viewmodel中配置空对象。当我在 Web 浏览器中运行该页面时，其中的输出 html<select>现在是许多<li>标签，其中包含相当多的 jquery ui 多选代码，但重要的是每个标签内部<option></option>都有<span>[object Object]</span>哪些。<li>标签的数量<li>与类别相同，这让我认为数据绑定正在工作。我只需要点击 [object object] 来获取属性（category.name）。我怎么做？

4

2 回答 2

0

您可能应该浏览 KnockoutJS 教程。AFAICT，您目前并没有真正使用它。

绑定处理程序负责调用multiselect(...)您的 DOM。你不应该像现在这样自己称呼它。相反，您需要一个将所有信息传递给自定义绑定处理程序的视图模型。

绑定处理程序需要 aconfig作为输入，并且您的视图告诉它您的视图模型具有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 网站及其教程。

于 2016-02-25T08:22:19.290 回答
0

由于我的 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>
于 2016-02-25T17:19:58.637 回答