Question

如何在knockoutjs中为optionsCaption设置值？例如，在我的应用程序中，我有一个选择框：

<select name="item" id="item" class="input-fo" multiple="multiple" data-bind="
                                    options         : categories,
                                    optionsValue    : '_id',
                                    optionsCaption   :'Select All',
                                    optionsText     : 'name',
                                    selectedOptions : $data['item'],
                                    select2         : {}
                                ">
</select>

在选项之上，我将optionsCaption设置为“全选”。如何在页面加载时为“全选”选项设置值？任何人都可以告诉我如何做到这一点？

Answer 1

如果要隐藏默认的组合框元素，可以将optionsCaption绑定到视图模型的任何可观察属性，并将其设置为null。

以下是示例（您也可以尝试live demo）：

HTML：

Options caption: 
<input data-bind="value: defaultCaption" />
Use or not:<input type="checkbox" data-bind="checked: defaultCaptionEnabled" />

<select data-bind="
        value: selected, 
        options: items, 
        optionsText: 'title', 
        optionsValue: 'key', 
        optionsCaption: dynamicOptionsCaption()">
</select>

JS：

var viewModel = function() {

    var self = this;

    self.selected = ko.observable('');
    self.defaultCaption = ko.observable('Select ...');
    self.defaultCaptionEnabled = ko.observable(true);

    self.items = ko.observableArray(
        [
            {key: 'KEY1', title: 'One'},
            {key: 'KEY2', title: 'Two'},
            {key: 'KEY3', title: 'Three'},
            {key: 'KEY4', title: 'Four'},
        ]
    );

    self.dynamicOptionsCaption = ko.computed(function() {
        return self.defaultCaptionEnabled() 
            ? self.defaultCaption()
            : null;
    });   
};

ko.applyBindings(new viewModel());

Answer 2

如果您希望“全选”具有值，则不要使用optionsCaption绑定。相反，只需添加一个“Select All”项作为数组“MyDataSet”的第一个元素，其id属性等于“Select All”所需的值。

Answer 3

我在ASP.Net MVC中通过在我用Razor设置的页面底部创建一个全局变量来完成此操作。我喜欢在页面后面命名全局变量，但这是个人偏好。

例如：

var MyPage = window.MyPage || {};
MyPage.Terms = {
    SelectAllText: '@Model.Terms.SelectAllText'
};

然后，您可以从KO模型访问页面全局变量。

(function (MyPage) {

    var Model = function() {
        this.terms = {
            selectAll: MyPage.Terms.SelectAll
        };
    };

    ko.applyBindings(new Model());

}(window.MyPage = window.MyPage || {}));

然后在您的页面标记中，只需访问terms属性。

<select name="item" id="item" class="input-fo" multiple="multiple" data-bind="
                                options         : categories,
                                optionsValue    : '_id',
                                optionsCaption  : terms.selectAll,
                                optionsText     : 'name',
                                selectedOptions : $data['item'],
                                select2         : {}
                            ">

这允许我使用服务器端模型设置JavaScript变量。我主要是为国际化做这件事。

Answer 4

这就是我让我的工作：

HTML：

  <select data-bind="options: MyDataSet, optionsText: 'MyOptionsText', optionsCaption: 'Select All', value: SelectedItem" ></select>

我的ViewModel：

 var MyDataViewModel = {
        MyDataSet: ko.observableArray(),
        SelectedItem: ko.observable()
      }

我的Ajax要填充数组：

 $.ajax({
        url: "/URLToYourMethod/GetJobTypes",
        data: {},
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "JSON",
        timeout: 10000,
        success: function (Result) {
            for (var i = 0; i < Result.d.length; i++) {
                element = Result.d[i];
                MyDataViewModel.MyDataSet.push({ MyID: element.MyID, MyOptionsText: element.MyOptionsText});
            }
        },
        error: function (xhr, status) {
            alert(status + " - " + xhr.responseText);
        }
    });

这就是它。

如何在knockoutjs中设置optionsCaption的值

4 个答案: