2

select と input-box が同じ値にバインドされているページがあります。通常は select から値を選択しますが、ユーザーは入力ボックスに任意の文字列を入力できる必要があります。問題は、選択に存在しないものを入力すると、バインドのために値が選択の最初の項目に設定されることです。

これは私が達成したい動作です:

ユーザーがselectから値を選択

  1. 選択した項目に値が設定されます。
  2. 選択した値で入力が更新されます。

ユーザーが入力にテキストを入力します

  1. 値は入力されたテキストに設定されます。
  2. 使用可能な値のコレクションに Value が存在しない限り、 Select は変更されません。

つまり、最後に変更されたコントロールが有効な値になるようにしたいのです。しかし、指定された値がそのコントロールに対して有効である限り、両方のコントロールを最新の状態にしたいと考えています。

私のコードは次のようになります。

js

var viewModel = { Value: ko.observable('1'), Set: ['1', '2', '3'] };
ko.applyBindings(viewModel);

html

<!-- ko if: Set.length > 1 || (Set.length > 0 && Set[0] != '') -->
<select type="text" class="form-control input-small" data-bind="options: Set, value: Value">
</select>
<!-- /ko -->

<input class="form-control input-small" data-bind="value: Value" style="margin-top: 5px;" />

コードが現在どのように機能するかを示す jsfiddle は次のとおりです: http://jsfiddle.net/b2RwG/

[編集]有効な解決策 ( http://jsfiddle.net/b2RwG/2/
) を見つけましたが、実際にはきれいではなく、この問題を解決するためのより良い方法が必要です。

4

2 に答える 2

1

ご覧のとおり、テキスト入力にバインドされた inputValue オブザーバブルを追加します。また、元のアイテムと新しいアイテム (テキスト入力から) の両方を含む計算された名前付き virtualSet を追加します。入力時に選択が自動的に設定されるように、inputValue を購読します。

var viewModel = {    
    inputValue: ko.observable('1'),
    Value: ko.observable('1'),
    Set: ['1', '2', '3']    
};
viewModel.virtualSet = ko.computed({
    read: function () {
        var vs = this.Set.slice(0);
        if (this.inputValue() && this.inputValue().length)
             vs.unshift(this.inputValue());
        return vs;
    },
    owner: viewModel
});
viewModel.inputValue.subscribe(function (value) {
    viewModel.Value(value);
});

フィドルを見る

お役に立てば幸いです。

于 2013-07-31T08:12:54.777 に答える
0

代わりに計算されたオブザーバブルを使用して選択することができます。これは、値が意味のある場合にのみ更新されます。

選択にキャプションを追加する例を作成しました。Setその結果、配列に含まれていない値を読み取るときに、最初の値を自動的に選択するのではなく、未定義の値を設定しようとします。

<select type="text" class="form-control input-small" data-bind="options: Set, value: SelectValue, optionsCaption: 'Other value'"></select>

これを行うには、オブジェクト リテラルの代わりにコンストラクター関数を使用すると、参照Valueを介してオブザーバブルにアクセスできるため、簡単になりselfます。

function ViewModel() { 
    var self=this; 
    this.Value = ko.observable('1'); 
    this.Set = ['1', '2', '3']; 
    this.SelectValue= ko.computed({
                 read: function() {
                     var val = self.Value(); 
                     return val; 
                 }, 
                 write: function(value) {
                     if(value) self.Value(value); 
                 }
    });
}

http://jsfiddle.net/b2RwG/4/を参照してください

于 2013-07-31T08:19:31.883 に答える