Question

我有一个jQuery UI滑块。当用户使用滑块时，滑块会更新滑块

的div标签中的attr变量

$(".slider").each(function() {
var value = parseInt($(this).attr('data-init-value'), 10);
var amin = parseInt($(this).attr('data-min'), 10);
var amax = parseInt($(this).attr('data-max'), 10);
console.log(value, " ", amin, " ", amax)
$(this).empty().slider({
    value : value,
    min : amin,
    max : amax,
    range : "min",
    animate : true,
    slide : function(event, ui) {
        $(this).attr('data-value', ui.value);
    }
});

}）;

html中的示例div标记：

<div class="slider" data-min="200" data-max="600" data-init-value="300" data-bind="attr: { 'data-value': someValue }"></div>

更改滑块后，数据值会在<div>中更新，但js变量不会更改。（在其他方面，琐碎的约束案例 - 就像文本： - 它有效。）

如何绑定此操作？

2 个答案:

答案 0 :(得分：3)

答案 1 :(得分：0)

Answer 1

我建议你反过来这样做。将滑块的值绑定到viewmodel上的observable属性，然后将该属性绑定到该observable。

然后，您始终可以通过viewmodel直接访问滑块的最新值，并且UI也将保持最新。

此外，如果您想订阅该observable的更新事件，您也可以绑定到该事件。以下是documentation：

中的示例

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

最后，这可能是一个可能的副本：Identify the attribute change event in KnockoutJS?

- 更新回复评论

给出以下viewmodel：

var viewModel = {
    mySliderValue: ko.observable(0)
};

然后，在滑块回调中，您可以执行以下操作：

viewModel.mySliderValue(value);

然后，在您看来，拥有以下attr绑定：

data-bind="attr: { 'data-value': mySliderValue }"

...会在observable更改其值时导致UI更新。

PS。我建议你不再删除这个帖子，因为我的答案开始越来越偏离我链接的那个。

Answer 2

执行此操作的方法是注册事件处理程序。

o.utils.registerEventHandler(element, "slidechange", function (event, ui) {
   var observable = valueAccessor();
   observable(ui.value);
});

JSFiddle完整示例： http://jsfiddle.net/snLk8/3/

关于attr变化的knockout.js变量更新

2 个答案: