Question

我在我的网站上进行添加或邀请选项，我需要首先获取网站的所有用户并以明天或类似选择选择器选项的方式显示它们，并且一旦选择了用户，就应该添加用户到邀请名单。这就像trello邀请董事会或组织。在这里看到trello：https://trello.com/

在最基本的步骤中，我尝试使用knockout live tutorial示例列表和集合示例。（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对此也非常有帮助。

使用Knockout.js自定义绑定进行Bootstrap-select

1 个答案: