Блог

Главная - Вопросы по программированию - Почему слайдер начинается не в том месте?

Почему слайдер начинается не в том месте?

#jquery #jquery-mobile #knockout.js

#jquery #jquery-мобильный #knockout.js

Вопрос:

Я пытаюсь передать значение ползунка в 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>

Это моя скрипка

Редактировать

Это пример слайдера, где слайдер начинается на своем месте. Скрипка

Ответ №1:

Похоже, что jQuery mobile инициализирует слайдер до того, как knockout установит его значение.

Быстрое и грязное решение: (не рекомендуется) вручную запускать обновление после применения привязок.

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

https://jsfiddle.net/avk9dyw4/

Реальное решение: примените привязки перед инициализацией jquery mobile или создайте пользовательский обработчик привязки, который позаботится о порядке инициализации виджетов и настройке атрибутов.

Комментарии:

1. примените привязки перед инициализацией jquery mobile , вы имеете в виду что-то вроде этого

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

3. Речь идет не о порядке атрибутов, а о порядке, в котором jQuery и knockout выполняют обработку DOM. jQuery mobile использует атрибуты min max и value для отображения пользовательского элемента управления. нокаут устанавливает эти атрибуты при вызове applyBindings . Поэтому, когда jQuery mobile создает пользовательский интерфейс до того, как у knockout появилась возможность установить атрибуты, он еще не может знать значение и отображает виджет по умолчанию.