7

如何在 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 设置为“全选”。页面加载时如何设置“全选”选项的值？谁能给我一个如何做到这一点的想法？

4

4 回答 4

8

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

这是示例（您也可以尝试现场演示）：

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());
于 2014-07-24T18:29:06.930 回答
1

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

于 2013-08-27T13:20:36.863 回答
1

我在 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 变量。我这样做主要是为了国际化。

于 2013-08-28T22:22:33.727 回答
0

这就是我让我的工作所做的：

HTML：

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

我的视图模型：

 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);
        }
    });

这就是它。

于 2013-08-27T12:17:18.443 回答