Почему эта * простая * KnockoutJS страница не работает?

0

Я работаю с KnockoutJS некоторое время, и у нас работает около десятка мобильных страниц JQuery. Тем не менее, я просто создал страницу, которая отказывается работать корректно, даже если она тривиально проста. Я думал, что я разделил бы эту страницу на свои основные вещи, а затем создавал бы ее, пока не нашел бы проблему... но простые вещи не работают!

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="Content/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
</head>
<body>
    <div data-role="page" data-theme="b" id="A4LDistancePage">
        <div data-role="header" data-position="fixed">
            <h1>Details</h1>
        </div>
        <div data-role="content">
            Minutes:
            <input id="DurMin" type="number" data-clear-btn="false" data-bind="value: DurationMin" title="Minutes">
            Seconds:
            <input id="DurSec" type="number" data-clear-btn="false" data-bind="value: DurationSec" title="Seconds">
            <div>
                Minutes:
                <span data-bind="html: DurationMin">0</span><br />
                Seconds:
                <span data-bind="html: DurationSec">0</span>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.mobile-1.3.2.min.js"></script>
    <script src="Scripts/knockout-2.3.0.js"></script>
    <script src="A4LDistance.js"></script>
</body>
</html>

Соответствующий JS файл:

$(document).on('pageshow', '#A4LDistancePage', function () {
    function DistanceInfoFn() {
        var self = this;
        self.DurationMin = ko.observable(15);
        self.DurationSecs = ko.observable(1);
    }

    var dif = new DistanceInfoFn();
    ko.applyBindings(dif, $("#A4LDistancePage")[0]);
});

Я объявляю DistanceInfoFn таким образом, потому что на полной странице я также вызываю метод на нем перед применением привязок.

Эта страница, как показано, связывает только первый вход. Второе поле ввода и два пролета никогда не связаны. Как я уже сказал, я делаю это уже несколько месяцев и никогда не сталкивался с таким причудливым отказом связывать переменные. Я мог бы действительно использовать какую-то помощь здесь, так как я стучался по этому поводу и упрощал его часами, чтобы понять, что не так, и не может понять, почему он не работает!

  • 0
    Вы звучите разочарованно, чувствуете себя хорошо :) Создайте скрипку.
  • 2
    self.DurationSecs против data-bind="value: DurationSec" ... у вас есть дополнительные s и, кстати, вы должны увидеть ошибку привязки в консоли вашего браузера ...
Показать ещё 1 комментарий
Теги:
knockout.js
jquery-mobile

1 ответ

1
Лучший ответ
DurationSec

должно быть

DurationSecs

http://jsfiddle.net/HWD6P/

Я удалил jquery только потому, что не использовал его в примере.

  • 0
    Sheesh - извините за это. Иногда вы смотрите на что-то так долго, что очевидные вещи ускользают. Но я кое-чему научился: когда привязка имеет неправильное имя, все привязки после нее также перестают работать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню