Question

我正在学习使用淘汰赛，我现在正在做的是使用jquery ui slider创建一个Slider。

ko.bindingHandlers.slider = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).slider("destroy");
    });
    ko.utils.registerEventHandler(element, "slide", function (event, ui) {
        var observable = valueAccessor();
        observable(ui.value);
    });
  },
  update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value)) value = 0;
    $(element).slider("value", value);

  }
};

在我的滑块中，有3种状态：0,50和100应根据我ViewModel中的A值设置

var ViewModel = function() {
    var self = this;
    self.A = ko.observable(null);

    var x = Math.random();
    if(x<0.33){
         self.A(0);

    }else if (x>0.33 && x<0.66){

         self.A(50);
    }else {
         self.A(100);

    }

}

反之，当我们更改View中的滑块时，ViewModel中的参数A也应该更改。

这是我的观点：

<div style="margin: 10px" data-bind="slider: A, sliderOptions: {min: 0, max: 100, step: 50}"></div>

我已经成功根据A的值创建了具有这三种状态的滑块，但是当我更改滑块时，viewModel中的新值A不会更新。谁能有想法？

这是我的jsfiddle。

Answer 1

您在问题中发布的代码在正确组合时正如预期的那样工作。这是一个示例，它添加了一个小pre标记，用于显示任何给定时间$root视图模型的当前状态。当您更改滑块时，您将按预期看到可观察标记。

＆＃13;

ko.bindingHandlers.slider = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    $(element).slider(options);
    ko.utils.registerEventHandler(element, "slidechange", function(event, ui) {
      var observable = valueAccessor();
      observable(ui.value);
    });
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).slider("destroy");
    });
    ko.utils.registerEventHandler(element, "slide", function(event, ui) {
      var observable = valueAccessor();
      observable(ui.value);
    });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (isNaN(value)) value = 0;
    $(element).slider("value", value);
  }
};

var ViewModel = function() {
  var self = this;
  self.A = ko.observable(null);

  var x = Math.random();
  
  if (x < 0.33) {
    self.A(0);
  } else if (x > 0.33 && x < 0.66) {
    self.A(50);
  } else {
    self.A(100);
  }
}

ko.applyBindings(new ViewModel());

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />Value:

<div style="margin: 10px" data-bind="slider: A, sliderOptions: {min: 0, max: 100, step: 50}"></div>
<hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

使用knockout来创建一个滑块

1 个答案: