KnockoutJS +选择重置我的可观察值后，我设置

所以我建立这个图表建设用户界面。你可以从数据库中选择字段来构建图表。并且图形具有刷新间隔下拉列表。KnockoutJS +选择重置我的可观察值后，我设置

一切正常，直到我试图从保存的“视图”中加载一个值值设置为我可以看到当我添加一个订阅到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被填充。我希望该值是实际的元素，而不是一个值字段，然后我需要与选项列表中的实际对象共同关联，因为选项列表可能会更改。

任何线索我怎么能解决这个问题？

来源

2016-12-13 Puzzle84

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

基本上没有在淘汰赛，你不能选择的值绑定到包装对象的限制。

由于此限制，以programatiicaly设置你想要的选项的唯一方法是：

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

来源

2016-12-13 23:51:23 Baconbeastnz

我试图将其设置为10秒。作为小提琴的底线。似乎没有发生在我身上。它永远不会。如果我将它设置为“10秒”，它会在select中正确显示，但observable不是它需要的元素，它是一个字符串。 – Puzzle84

阿叶我看到了，对不起，错过了，已经更新了答案和小提琴。 – Baconbeastnz

你先生是救世主。如果只有我可以把头发拉回来.. – Puzzle84

KnockoutJS +选择重置我的可观察值后，我设置

回答

相关问题