Я работаю с 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 таким образом, потому что на полной странице я также вызываю метод на нем перед применением привязок.
Эта страница, как показано, связывает только первый вход. Второе поле ввода и два пролета никогда не связаны. Как я уже сказал, я делаю это уже несколько месяцев и никогда не сталкивался с таким причудливым отказом связывать переменные. Я мог бы действительно использовать какую-то помощь здесь, так как я стучался по этому поводу и упрощал его часами, чтобы понять, что не так, и не может понять, почему он не работает!
DurationSec
должно быть
DurationSecs
Я удалил jquery только потому, что не использовал его в примере.
self.DurationSecs
противdata-bind="value: DurationSec"
... у вас есть дополнительныеs
и, кстати, вы должны увидеть ошибку привязки в консоли вашего браузера ...