在 attr 更改上的 knockout.js 变量更新答案

【问题标题】：knockout.js variable update on attr change在 attr 更改上的 knockout.js 变量更新
【发布时间】：2013-04-03 18:27:55
【问题描述】：

我有一个 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 变量不会更改。（在其他琐碎的绑定情况下——比如文本：——它可以工作。）

如何绑定这个动作？

【问题讨论】：

你可以在设置完成后尝试触发 .change() 吗？所以$(this).attr('data-value', ui.value).change(); 我知道.val("value") 不会触发更改事件（这是淘汰赛所听的）所以我猜 attr() 也不会。（或者您可以按照 Lasse 下面的建议进行操作，并更新淘汰变量）。

标签： javascript jquery-ui knockout.js

【解决方案1】：

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

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

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

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

最后，这也可能是：Identify the attribute change event in KnockoutJS?

-- 更新回答 cmets

给定以下视图模型：

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

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

viewModel.mySliderValue(value);

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

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

...当 observable 改变它的值时会导致 UI 更新。

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

【讨论】：

如何将滑块的值绑定到我的视图模型上的可观察属性？
好的，很好，但是我有很多滑块，我想将它们绑定到不同的变量，所以每个滑块都应该绑定到不同的变量，上面的方法只有在我列出时才有效在 slide : function(){...} 滑块初始化时我在 js 中的所有变量。我认为将 data-bind 与 attr 一起使用会更有活力，不是吗？
首先，如果这有效并解决了您的问题，我很高兴，如果您能接受答案，我会很高兴 :) 其次，我不太明白这个问题您在最近的评论中问-您提到您有多个滑块-将每个滑块绑定到自己的 observable 有什么问题？
让我们假设我们有 n 个滑块，其中有 n 个变量必须绑定。变量被推入一个数组，滑块也是从服务器端脚本生成的。您将如何使用 bind 处理？
据我所知，这是另一个问题 :) 当前问题假设存在一个滑块，引用：“我有一个 jQuery UI 滑块”，所以我相信你是什么现在问，属于一个新问题。同样，如果以上解决了您的问题，请接受它:)

【解决方案2】：

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

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

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

【讨论】：