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

Question

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

一切正常，直到我尝试从已保存的 "view" 中加载一个值当我添加对 RefreshInterval 变量的订阅时，我可以看到该值已设置。

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

[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：Fiddle

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

知道如何解决这个问题吗？

Answer 1

<select> 上的值属性未正确生成，您需要将 optionsValue: 'Value' 添加到您的绑定

基本上，Knockout 中存在一个限制，即您无法将所选值绑定到包装对象。

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

vm.RefreshInterval("10 seconds");

计算当然会 return 字符串值而不是整个对象。然后你可以简单地这样做来获取对象。（或者使用下划线或者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

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

KnockoutJS + Chosen are resetting my observable value after i set it

javascript

jquery-chosen

knockout.js