ノックアウトを使用してスライダーを作成

Question

ノックアウトを使用して学習しています。私が今行っていることは、jquery ui sliderを使用してスライダーを作成することです。私たちは、スライダーを変更すると、私の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); 

    } 

} 

INと逆にAの値に応じて設定されるべきで0、50と100：私のスライダーで

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つの状態があります Viewでは、 ViewModelのパラメータAも変更する必要があります。

これは私のビューです：Aの値に応じて、これらの三つの状態でスライダーを作成することが、私はすでに成功し

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

が、私はスライダーを変更すると、viewModelにおけるAの新しい値があります更新されていない。誰にでもアイデアはありますか？

ここは私の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>