0

オプションリストのドロップダウンをobservableArrayにバインドするためにノックアウトを使用しようとしています。私が知る限り、見つけた例に従っていますが、機能していません。以下は、私のコードの関連部分です。これは MVC アプリの cshtml ファイルにあるため、そこに Razor 構文がいくつか表示されます。

$(function () {
  var $thisdd = $("#@ddname");  //the JQuery selector for my dropdown
  var dropdownItems = new ko.observableArray();

  dropdownItems = getDropdownItemsFromDl("@ddname");

  var newitem = ko.observable({ cname: ddcname, cvalue: ko.observable($thisdd.val()), cpublishtopic: "" });
  classificationsViewModel.push(newitem());
  $thisdd.attr("data-bind", "options: dropdownItems, optionsText: function(item) { return item.value; }, optionsValue: function(item) { return item.key; }, value: classificationsViewModel()[" + classificationsViewModel.indexOf(newitem()) + "].cvalue ");
  ko.applyBindings(newitem);
});

getDropdownItemsFromDl を呼び出した後、dropdownItems は Chrome デバッグ ウォッチ ウィンドウで次のように表示されます。

dropdownItems(): Array[14]
0: Object
key: "0"
value: "none"
__proto__: Object
1: Object
key: "1"
value: "Equity Portfolio"
__proto__: Object
2: Object
key: "2"
value: "Fixed Income Portfolio"
__proto__: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
length: 14
__proto__: Array[0]

classificationsViewModel は ko.observableArray です。cvalue は、その配列内のオブジェクトの ko.observeable プロパティです。

ドロップダウン オプション リストは、配列の最初の項目である「なし」のみで終了します。バインディング属性の何が問題になっていますか?

4

1 に答える 1

0

値へのバインディングが最後のスクリプト行である限り、これが機能するようになりました。その ko.applyBinding 行より後の JavaScript は実行されません! これは私のアプリにとって深刻な問題であるため、その奇妙さに対処するために別の質問を作成します。

ビューモデルを使用することになったことに注意してください。observableArray に直接バインドして動作させることができませんでした。

また、data-bind 属性では、value: が options: の前にあることに注意してください。属性の最後の部分に value: があると、オプション bind が機能しませんでした。

「機能する」私のコードの関連行は次のとおりです。

$(function () {   
  var $thisdd = $("#@ddname");  //the JQuery selector for my dropdown   

  var dropdownItems = getDropdownItemsFromDl("@ddname");    
  var newitem = ko.observable({ cname: ddcname, cvalue: ko.observable($thisdd.val()), cpublishtopic: "" });   
  classificationsViewModel.push(newitem());   

  var viewModel =
    {
        dditems : dropdownItems 
    };

  $("#@ddname").attr("data-bind", "value: classificationsViewModel()[" + classificationsViewModel.indexOf(newitem()) + "].cvalue, options: dditems, optionsText: 'value', optionsValue: 'key'");
  ko.applyBindings(viewModel);
  ko.applyBindings(classificationsViewModel()[classificationsViewModel.indexOf((newitem())].cvalue);
});

この「答え」が、この問題に苦しんでいる他の誰かに役立つことを願っています。

于 2012-08-21T16:42:42.840 に答える