使用knockout.js設置Range Slider的屬性

Question

我是新來的knockout.js，希望問一個簡單的小問題。

我有以下簡單的jQuery移動滑塊範圍內工作正常：

<input min=1 max=50 value=3 type="range" data-highlight="true"> 

我現在希望改變最大和值動態屬性。這是我的HTML：

<input data-bind="min: 1, max: MaxPage, value: CurrPage" type="range" data-highlight="true"> 

這是我的JavaScript：

var x1 = 8; 
var x2 = 40; 

function ViewModel() { 
    this.CurrPage = ko.observable(x1); 
    this.MaxPage = ko.observable(x2); 
}; 

ko.applyBindings(new ViewModel()); 

但是，這不是工作。這裏是完整的jsfiddle page 有人可以請告訴我做錯了什麼。

如果我希望更新x1滑塊值的變化，我還需要做什麼？

感謝

Answer 1

代替max和min綁定，它剔除不具備的，它應該是attr：

<input data-bind="attr: {min: 1, max: MaxPage}, value: CurrPage" type="range" data-highlight="true"> 

Fiddle。

另外，你的小提琴沒有工作，直到我設置延遲一切到domReady。

要更新x1，認購this.CurrPage改變內部ViewModel：

this.CurrPage.subscribe(function (value) { 
    x1 = value; 
}); 

你可以閱讀有關observable文檔訂閱。

更新：爲了改變x1，下面CurrPage(value)，changeCurrent函數調用正是這麼做的：

var x1 = 8, 
    x2 = 40; 

function ViewModel() { 
    this.CurrPage = ko.observable(x1); 
    this.MaxPage = ko.observable(x2); 

    this.CurrPage.subscribe(function (value) { 
     x1 = value; 
    }); 

    this.changeCurrent = function() { 
     this.CurrPage(13); 
    } 
}; 

ko.applyBindings(new ViewModel()); 

<button data-bind="click: changeCurrent">Change current</button> 

我強烈建議你閱讀淘汰賽文檔和工作throught互動教程。

更新2：要直接從代碼中調用changeCurrent，你需要有視圖模型實例引用：

function ViewModel() { 
    ... 
}; 

var vm = new ViewModel(); 
ko.applyBindings(vm); 

vm.CurrPage(13);