Я заметил, что не могу заставить работать некоторые из живых руководств по Knockout или базовые примеры, которые должны демонстрировать наблюдаемое связывание данных.

Вот мой код:

<!DOCTYPE html> 
<html lang="en">

<html>
    <head>
        <meta charset="utf-8" />
        <title>Testing</title>
        <script type="text/javascript" src="knockout.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function TestViewModel() {
                this.Name = ko.observable("Testing");
            }

            $(function() {
                ko.applyBindings(new TestViewModel());
            });
        </script>
    </head>

    <body>
        <h1>Testing Knockout.js</h1>
        <div>
            <div>
                <span data-bind="text: Name"></span>
            </div>
            <div>
                <input type="text" data-bind="value: Name"></input>
            </div>
        </div>
    </body>
</html>

Поэтому, когда я открываю это в Google Chrome или Firefox, я ожидаю, что значение тега span будет меняться при изменении текста во входных данных, однако это не так. Может кто-нибудь объяснить, почему выше не работает? (Этот код был в значительной степени скопирован из документации на сайте)

Спасибо, Алекс.

28
Alex Hope O'Connor 27 Янв 2013 в 13:04

3 ответа

Лучший ответ

Начиная с KO версии 3.2 (как указано в ответе Сальвадора Дали), вы должны использовать textinput привязка для мгновенных обновлений:

<input data-bind="textInput: userName" />

Если вы используете более раннюю версию Knockout и привязку value, вы должны внести следующие изменения:

По умолчанию нокаут обновляет значение наблюдаемых в событии изменения (например, когда фокус текстового поля потерян).

Если вы хотите мгновенное обновление, вам нужно указать параметр valueUpdate, где возможны следующие события: keyup, keypress, afterkeydown, дополнительную информацию смотрите в документация.

Так что измените вашу value привязку:

<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>

Демонстрация JSFiddle.

59
Community 23 Май 2017 в 10:31

Для тех, кто бродит здесь (как и я), интересно, почему это не работает. Помните о вашем дополнительном использовании (). Это привело меня к неприятностям с вложенной наблюдаемой, подобной этой:

Плохой:

<input data-bind="textInput: subItem().userName()" />

Хороший:

<input data-bind="textInput: subItem().userName" />
0
Rafe Smith 14 Ноя 2018 в 20:43

Принятый ответ правильный, но в новой версии KO 3.2 они добавили привязку textinput. Так что вместо {{X0 }} связывание вы можете использовать textInput:

<input data-bind="textInput: userName" />

Это делает две важные вещи:

  • сделать немедленные обновления
  • обрабатывает различия браузера для вырезания, перетаскивания, автозаполнения ...
20
Salvador Dali 25 Авг 2014 в 19:40