在我设置后，KnockoutJS + Chosen 正在重置我的可观察值

Question

所以我正在构建这个图表构建 ui。您是否可以从数据库中选择字段来构建图表。并且图表有一个刷新间隔下拉菜单。

在我尝试从保存的“视图”加载值之前，一切正常 当我添加对 RefreshInterval 变量的订阅时，我可以看到该值已设置。

但它会立即重置为我的选项数组的 0'd 索引。

[html]

<div class="wrapper wrapper-content" id="charts">
  <select id="interval" data-bind="options: RefreshIntervals,
    optionsText: 'Value',
    value: RefreshInterval,
    chosen: {
      disable_search_threshold: 0,
      width:'175px',
      no_results_text: 'No results!',
      placeholder_text_single: 'Select an interval',
      search_contains: true,
    }">
  </select>
</div>

[javascript]

function ViewModel() {
    var self = this;
    this.RefreshIntervals = ko.observableArray([
                new Interval(0, "Never"), new Interval(10, "seconds"), new Interval(1, "minutes"), new Interval(5, "minutes")
            ]);
    this.RefreshInterval = ko.observable(new Interval(5, "minutes"));
};

var Interval = (function () {
    function Interval(length, measurement) {
    var _this = this;
    this.Length = 0;
    this.Measurement = "";
    this.Value = "";
    this.TimeoutValue = 0;
    this.GetTimeoutValue = function () {
      switch (_this.Measurement) {
        case "seconds":
          return _this.Length * 1000;
        case "minutes":
          return _this.Length * 60000;
        default:
          return 0;
      }
    };
    this.Length = length;
    this.Measurement = measurement;
    if (length == 0 || measurement == "Never") {
      this.Value = "Never";
    }
    else {
      this.Value = this.Length + " " + this.Measurement;
    }
    this.TimeoutValue = this.GetTimeoutValue();
  }
  return Interval;
}());

ko.bindingHandlers.chosen =
{
    init: function (element, valueAccessor, allBindings) {
      $(element).chosen(valueAccessor());

      // trigger chosen:updated event when the bound value or options changes

      $.each('value|selectedOptions|options'.split("|"), function (i, e) {
          var bv = allBindings.get(e);
          if (ko.isObservable(bv)) {
            bv.subscribe(function () {
              $(element).trigger('chosen:updated');
            });
          }
      });
    }
};
var vm = new ViewModel();
ko.applyBindings(vm, document.getElementById("charts"));

我这里有个小提琴：Fiddle

我有 3 个需要填充的下拉框。 我希望该值是实际元素，而不是一个值字段，然后我需要与选项列表中的实际对象相关联，因为选项列表可能会发生变化。

有什么办法可以解决这个问题吗？

Answer 1

<select> 上的 value 属性没有正确生成，你 需要将optionsValue: 'Value' 添加到您的绑定中

基本上在 Knockout 中有一个限制，您不能将选定的值绑定到包装对象。

由于此限制，以编程方式设置所需选项的唯一方法是：

vm.RefreshInterval("10 seconds");

计算当然会返回字符串值而不是整个对象。 然后您可以简单地执行此操作来获取对象。 （或者使用下划线或者lodash让代码看起来更优雅一点）

this.RefreshInterval.subscribe(function(newValue){
 var obj = null;
 for(var i=0; i<self.RefreshIntervals().length; i++) {
   var interval = self.RefreshIntervals()[i];
   if(interval.Value === newValue) {
     obj = interval;
     break;
   }
 }
 console.log(obj);
); 

请注意，您还需要optionsValue: 'Value',

更新working fiddle