javascript - 使用 Knockout.js 自定义绑定(bind)进行 Bootstrap 选择

Question

我正在我的网站上创建“添加”或“邀请”选项，我需要首先获取该网站的所有用户，并以预先输入或类似选择选择器选项的方式显示它们，一旦选择了用户，就应该添加该用户到邀请列表。这就像 trello 邀请董事会或组织一样。 请参阅此处 trello:https://trello.com/

在非常基本的步骤中，我尝试使用 knockout 现场教程示例列表和集合示例。 (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>

这是 knockout 码

//selectpicker的自定义绑定(bind)

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

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

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

knockout documentation对此也很有帮助。