0

TR内のドロップダウンメニューに取り組んでいます..サーバーから受け取る値としてtrue、false、またはなしがあり、以下の例のようにドロップダウンオプションを変更したい.

最初のものは機能していますが、2番目のものを最初のものとして機能させたい

例はこちら: http://jsfiddle.net/3xLgJ/

これは私のHTMLです：

       <div data-bind='text: incomingValue'></div>

       <select data-bind="value: incomingValue">
             <option value="true">Yes</option>
             <option value="false">No</option>
             <option value="none">Don't Know</option>
      </select>

これはtr内にあり、上記のように機能するため、これを上記のように実装するにはどうすればよいですか

      <select  data-bind='options: yesno, value: incomingValue'/>

これが私のノックアウトです

    var myModelView = function () {
    self = this;
    self.yesno = ko.observableArray(['Yes', 'No', 'Don\'t know']);
    self.incomingValue = ko.observable('none');
    };

    var moView = new myModelView();

    ko.applyBindings(moView);

ありがとう

ありがとう

4

2 に答える 2

1

optionsTextおよびoptionsValueバインディングを使用する必要があります。値とテキストの監視可能な配列を作成する必要があります。

self.yesno = ko.observableArray([
    {value:"true",text:"Yes"},
    {value:"false",text:"No"},
    {value:"none",text:"Don't Know"}]);

次に、html で次のようにする必要があります。

<select data-bind="options: yesno2, optionsText: 'text',optionsValue: 'value', value: incomingValue"></select>

実例はこちらをご覧ください

于 2013-03-21T14:00:29.397 に答える
1

おそらく最善の解決策は、単純な文字列の代わりにオブジェクトを使用するようにビュー モデルを少し再構築することです。

// Create a "class" that represents an option
var Option = function(id, caption) {
    this.id = id;
    this.caption = caption;
};

次に、この関数から構築されたオブジェクトを監視可能な配列に入力します。

self.yesno = ko.observableArray([
    new Option('true', 'Yes'),
    new Option('false', 'No'),
    new Option('none', 'Don\'t know')
]);

「optionsText」バインディングを使用して、これらのオブジェクトをマークアップに正しくバインドできます。

<select data-bind="options: yesno,
                   optionsText: 'caption',
                   value: selectedItem"></select>

サーバーから文字列「none」を受け取った場合、このオプションを表すオブジェクトを見つける必要があります。

var incomingValue = 'none';

// Find the first object that is a match in the observable array "yesno"
var incomingItem = ko.utils.arrayFirst(self.yesno(), function(item) {
    return item.id == incomingValue;
});

self.selectedItem = ko.observable(incomingItem);

選択範囲を別の場所に表示するときは、選択範囲がオブジェクトによって表されていることを考慮する必要があります。

<div data-bind='text: selectedItem().caption'></div>

デモ: http://jsfiddle.net/3xLgJ/2/

于 2013-03-21T13:59:31.940 に答える