используя нокаут для создания слайдера

Question

Я изучаю использование нокаута, и теперь я создаю слайдер, используя jquery ui 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

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, параметр A в ViewModel также должен быть изменен.

Это мой Вид:

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

Я уже успешно создать слайдер с этими трмися состояниями в соответствии со значением А, но когда я изменить ползунок, новое значение A в viewModel является не обновляется. У кого-нибудь есть идея?

Это мой jsfiddle.

Answer 1

Код, который вы опубликовали в своем вопросе, работает по назначению при правильном сочетании. Вот пример, который добавляет небольшой тег pre, который показывает текущее состояние модели просмотра $root в любой момент времени. Когда вы меняете ползунок, вы увидите, что наблюдаемые теги по желанию.

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

<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>