为啥滑块从错误的位置开始？

Posted 2023-05-09

【中文标题】为啥滑块从错误的位置开始？

【英文标题】：Why slider start at wrong place?为什么滑块从错误的位置开始？

【发布时间】：2017-02-27 18:17:16

【问题描述】：

我正在尝试将滑块值传递给 span 并动态更改它。它工作正常，但是当我开始页面时，滑块按钮移位了错误的值。我该如何解决？ 这是我的 html

<div data-role="page">
    <div data-role="header">
        <h1>Slider Control</h1>
    </div>

    <div data-role="main" class="ui-content">

            <label for="points">Points:</label>
            <input type="range" data-highlight="true"  data-bind="attr: 'id': id, 'min': min, 'max': max, value: value, valueUpdate: 'input'" />
            Net: <span data-bind="text: value"></span>
    </div>

这是my fiddle

编辑

这是滑块的示例，滑块从其位置开始。 Fiddle

【参考方案1】：

看起来 jQuery mobile 会在 敲除设置它的值之前初始化滑块。

快速而肮脏的解决方案：（不推荐）在应用绑定后手动触发更新。

ko.applyBindings(viewModel);
$("input").trigger("change");

https://jsfiddle.net/avk9dyw4/

真正的解决方案：应用绑定在 jquery mobile 初始化或创建一个自定义绑定处理程序，该处理程序负责初始化小部件和设置属性的顺序。

【讨论】：

在 jquery mobile 初始化之前应用绑定你的意思是这样的

<input data-bind="attr: 'id': id, 'min': min, 'max': max, value: value, valueUpdate: 'input'" type="range" data-highlight="true" />

这不是关于属性的顺序，而是关于 jQuery 和 knockout 处理 DOM 的顺序。 jQuery mobile 使用min、max 和value 属性来呈现自定义控件。当您调用 applyBindings 时，knockout 会设置这些属性。因此，当 jQuery mobile 在 敲除有机会设置属性之前创建 UI 时，它还不知道值并呈现默认小部件。