0

我有一个 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 变量不会更改。（在其他琐碎的绑定案例中——比如文本：——它有效。）

如何绑定这个动作？

4

2 回答 2

3

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

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

此外，如果您想订阅该 observable 的更新事件，您也可以绑定到该事件。这是文档中的一个示例：

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

最后，这也可能是以下内容的重复：识别 KnockoutJS 中的属性更改事件？

-- 更新回答评论

给定以下视图模型：

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

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

viewModel.mySliderValue(value);

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

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

...当可观察对象更改其值时，将导致 UI 更新。

PS。我建议您不再删除此线程，因为我的答案开始越来越偏离我链接到的那个。

于 2013-04-03T18:35:44.890 回答
0

方法是注册一个事件处理程序。

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

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

于 2013-04-03T19:47:48.220 回答