5

observableであるノックアウトvalueの値を設定できるようにselectしたいcase-insensitivity。したがって、以下の例では、渡すjustinと が に設定さselectedValueれJustinます。

動作しない: jsfiddle

作業: jsfiddle

HTML

<select id="people" data-bind="options: peopleList, value: selectedPerson, optionsCaption: 'Choose...'">
</select>

JS

function MyViewModel(defaultPerson) {
    var self = this;
    self.selectedPerson = ko.observable(defaultPerson);
    self.peopleList = ko.observableArray(["Justin", "Sam", "Chris", "John"]);
}

$(function(){
    var person = 'justin';
    var viewModel = new MyViewModel(person);

    ko.applyBindings(viewModel);
});
4

2 に答える 2

1

optionsValueおよびバインディングを使用optionsTextして、値の大文字と小文字を区別せずにエントリを「そのまま」レンダリングします。

function MyViewModel(defaultPerson) {
    var self = this;
    var Person = function(name) {
        this.name = name;
        this.ciName = name.toLowerCase();
    };
    self.selectedPerson = ko.observable(defaultPerson);
    self.ciSelectedPerson = ko.computed(function() {
        return self.selectedPerson().toLowerCase();
    });
    self.peopleList = ko.observableArray(
        ["Justin", "Sam", "Chris", "John"].map(
            function(s) { return new Person(s) }));
}

マークアップ:

<select id="people" data-bind="options: peopleList, optionsValue: 'ciName', optionsText: 'name', value: ciSelectedPerson, optionsCaption: 'Choose...'">
</select>
于 2013-08-09T11:10:10.133 に答える
1

自分でオプションをレンダリングでき、optionsバインディングを使用しません。これにより、値を小文字に変換できます。

<select id="people" data-bind="value: selectedPerson, optionsCaption: 'Choose...'">
    <option value=''>Choose...</option>
    <!-- ko foreach: peopleList -->
        <option data-bind='value: $data.toLowerCase(), text: $data'></option>
    <!-- /ko -->
</select>

ここではjsFiddleが動作しています

于 2013-08-09T10:30:55.307 に答える