为什么我的淘汰赛选项绑定不起作用？答案

【问题标题】：Why don't my knockout options bindings work?为什么我的淘汰赛选项绑定不起作用？
【发布时间】：2012-08-16 15:47:41
【问题描述】：

我正在尝试使用敲除将下拉列表绑定到选项列表的 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 后，Chrome 调试监视窗口中的 dropdownItems 如下所示：

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 属性。

下拉选项列表最后只有“无”，即数组中的第一项。我的绑定属性有什么问题？

【问题讨论】：

在深入研究之前，您是否在任何地方调用了 ko.applyBindings(viewmodel, element)？我没看到。此调用会将您的视图模型绑定到您的 DOM；
感谢您指出遗漏，muck41。是的，那行已经在我的代码中，我已经更新了帖子。
我认为您不能将函数用于optionsValue 绑定。它必须是带有属性名称的字符串（例如“key”）。在大多数情况下，使用 optionsValue 不是要走的路，因为您希望 KO 维护这些值

标签： javascript data-binding knockout.js

【解决方案1】：

我让它工作只要绑定到值是最后一个脚本行。该 ko.applyBinding 行之后的任何 javascript 都不会被执行！我将创建另一个问题来解决这种奇怪的问题，因为这对我的应用程序来说是一个严重的问题。

请注意，我最终使用了 viewModel。我无法直接绑定到 observableArray 以工作。

另请注意，在 data-bind 属性中 value: 位于 options: 之前。当我有 value: 作为属性的最后一部分时，选项绑定不起作用。

这是我的代码中“有效”的相关行。

$(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);
});

我希望这个“答案”可以帮助其他人解决这个问题。

【讨论】：