2012-03-05 3 views
1

2つの異なるAJAX呼び出しによって現在の値と利用可能なオプションの両方を取得する必要があります(いくつかの理由でそれらをキューに入れることはできません)。AJAXでオプションをバインドするときに、選択要素のデフォルト値をKnockoutに渡すことはできますか?

問題があるかどうかわかりませんが、コールの前に現在の値を読み取る呼び出しが完了する前に、毎回使用可能なオプションが読み取られます。

ノックアウト2.0.0とノックアウトマッピング2.0.3を使用して、選択をdata-bind="options: values, value: valueComputed"でバインドしましたが、ノックアウトは最初のAJAXコールで設定された値を削除/無視していました。現在の値を設定することはできません。

これは間違いありませんか? Knockoutに「これは現在の値です。利用可能なオプションが選択可能になったら、それを選択できますか?

私はkludgeを思いついた:私は値をインターセプトする計算された観測値を使用し、新しい値があれば観測値を変更しないで、普通の観測値を選択値にバインドするのではなく未定義。

私は何か悪いことをしていますか?

A jsFiddle例:http://jsfiddle.net/KeNUU/

私が使用しているJavaScriptコード:

var viewModel = function() { 
    var self = this; 

    // The underlying observable where 
    // the selected value is stored. 
    self.value = ko.observable(); 

    // The observable bound to 
    // the value of the drop down. 
    self.values = ko.mapping.fromJS([]); 

    // Use a computed observable to intercept the undefined 
    // value placed by KnockOut when binding the drop down. 
    self.valueComputed = ko.computed({ 
     "read": function() { 
      return ko.utils.unwrapObservable(self.value); 
     }, 
     "write": function (value) { 
      // Update the underlying observable only when 
      // there is a value, if it's undefined ignore it. 
      if (value) { 
       self.value(value); 
      } 
     } 
    }); 

    // Simulate the AJAX request which fetches the actual value, 
    // this request must complete before the second one. 
    setTimeout(function() { 
     self.valueComputed("b"); 
    }, 1000 * 1); 

    // Simulate the AJAX request which fetches the available values, 
    // this reqest must complete after the first one. 
    setTimeout(function() { 
     ko.mapping.fromJS(["a", "b", "c", "d"], {}, self.values); 
    }, 1000 * 2); 
}; 

$(document).ready(function() { 
    ko.applyBindings(new viewModel()); 
}); 

答えて

2

私はあなたがあなたの問題を引き起こすことが起こっている何をしているとは思わないが、あなたは回避されています価値に結びついているものがあなたの選択肢の有効な選択であることを保証するKOの論理。さらに、空白の選択肢を提供するためにoptionsCaptionを使用していた場合、あなたの価値をクリアすることはできません。あなたの場合、それは問題ではないでしょう。

私は、より簡単な選択肢は、観測不可能な状態で初期値をキャッシュしてから、リストが戻ってくるときにそれを使ってvalueを埋め込むことだと思います。リストが最初に来た場合、初期値はなく、通常のように動作します。

何かのように:今

setTimeout(function() { 
    self.initialValue = "b"; 
    self.value("b"); 
}, 1000 * 1); 

// Simulate the AJAX request which fetches the available values, 
// this reqest must complete after the first one. 
setTimeout(function() { 
    ko.mapping.fromJS(["a", "b", "c", "d"], {}, self.values); 
    if (self.initialValue) { 
     self.value(self.initialValue); 
     self.initialValue = null; 
    }  
}, 1000 * 2); 

http://jsfiddle.net/rniemeyer/gB3E5/

、あなたは計算された観察可能な切片にドロップダウンへのすべての変更を持つ(マイナー)のオーバーヘッドなしに、この先行投資を扱います。

+0

ノックアウト3.1(昨日リリース)に基づく新しい回答を参照http://stackoverflow.com/questions/22198994/knockout-select-binding-not-remembering-value-when-options-added-late –

関連する問題