Question

我是knockout.js的新手，希望问一个简单的小问题。

我有以下简单的JQuery移动范围滑块可以正常工作：

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

我现在希望动态更改max和value属性。这是我的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绑定，而Knockout没有，它应该是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>

我强烈建议您阅读Knockout文档并完成交互式教程。

更新2：要直接从代码中调用changeCurrent，您需要拥有ViewModel实例引用：

function ViewModel() {
    ...
};

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

vm.CurrPage(13);

使用knockout.js设置Range Slider的属性

1 个答案: