带有 Knockout.js 自定义绑定的引导选择

Question

我在我的网站上添加或邀请选项，我需要先获取网站的所有用户，并以预先输入或类似选择选择器选项的方式显示他们，一旦选择用户，就应该添加用户到邀请列表。这就像 trello 邀请加入董事会或组织。 看这里 trello：https://trello.com/

在最基本的步骤中，我尝试使用淘汰赛现场教程示例列表和集合示例。 (http://learn.knockoutjs.com/#/?tutorial=collections)

这是我的代码

HTML

<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
<button class="btn btn-deffault" data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>
<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="foreach: seats">
        <tr>
            <td><input data-bind="value: name" /></td>
            <td><select class="selectpicker" data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'" data-live-search="true"></select></td>
            <td><input data-bind="value: formattedPrice"></td>
            <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
        </tr>
    </tbody>
</table>
<h3 data-bind="visible: totalSurcharge() > 0">
    Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>

这里是淘汰码

//selectpicker的自定义绑定

ko.bindingHandlers.selectPicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            if ($(element).is('select')) {
                if (ko.isObservable(valueAccessor())) {
                    ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
                }
                $(element).selectpicker();
            }
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            if ($(element).is('select')) {
                var selectPickerOptions = allBindingsAccessor().selectPickerOptions;
                if (typeof selectPickerOptions !== 'undefined' && selectPickerOptions !== null) {
                    var options = selectPickerOptions.options,
                        optionsText = selectPickerOptions.optionsText,
                        optionsValue = selectPickerOptions.optionsValue,
                        optionsCaption = selectPickerOptions.optionsCaption;
                    if (ko.utils.unwrapObservable(options).length > 0) {
                        ko.bindingHandlers.options.update(element, options, ko.observable({ optionsText: optionsText, optionsValue: optionsValue, optionsCaption: optionsCaption }));
                    }
                }
                if (ko.isObservable(valueAccessor())) {
                    ko.bindingHandlers.value.update(element, valueAccessor);
                }
                $(element).selectpicker('refresh');
            }
        }
    };

function AllUsers(data){
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);


    self.formattedPrice = ko.computed(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });

    self.formatPrice = ko.observable(self.formattedPrice());

    self.about_me = ko.observable(data.about_me);
    self.email = ko.observable(data.email);
    self.uname = ko.observable(data.uname);
    self.uuid = ko.observable(data.uuid);
    self.everyuser = [
     {aboutMe: self.about_me(), email: self.email(), name: self.uname, id: self.uuid()}
    ];

}

function PostViewModel() {
    var self = this;

    self.allusers= ko.observableArray([]);

    self.gert = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    



    $.getJSON('/users', function (json) {
        var t = $.map(json.users, function(item) {
            console.log("Something",item);

            return new AllUsers(item);
        });
        self.allusers(t);
    });


}

ko.applyBindings(new PostViewModel());

但是在 HTML 代码中使用类 selectpicker 时，代码不工作并且不显示选项，如果不使用 selectpicker，那么简单的下拉菜单就出现了。

<td><select class="selectpicker" data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'" data-live-search="true"></select></td>

任何知道 Knockout.js 的人请帮忙

Answer 1

您似乎正在使用自定义绑定的名称作为 <select> 的 CSS 类。为了正确应用绑定，您需要在 data-bind 属性中执行此操作。

<select data-bind="selectpicker: meal"></select>

Knockout 的documentation 对此也很有帮助。