为什么这个 *simple* KnockoutJS 页面不起作用？ [关闭]答案

【问题标题】：Why is this *simple* KnockoutJS page not working? [closed]为什么这个 *simple* KnockoutJS 页面不起作用？ [关闭]
【发布时间】：2013-10-22 20:47:08
【问题描述】：

我使用 KnockoutJS 已经有一段时间了，并且有大约十几个 JQuery Mobile 页面成功运行。但是，我刚刚创建了一个页面，即使它非常简单，也无法正常工作。我想我会把页面剥离到它的基本要素，然后重新构建它，直到我发现问题......但是基本要素甚至都不起作用！

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，因为在整个页面中，我还在应用绑定之前对其调用了一个方法。

这个页面，如图，只绑定第一个输入。第二个输入字段和两个跨度永远不会绑定。正如我所说，我已经这样做了好几个月了，从来没有遇到过这种奇怪的拒绝绑定变量的情况。我真的可以在这里使用一些帮助，因为我一直在努力解决这个问题并简化了几个小时，看看有什么问题，但看不出它为什么不起作用！

【问题讨论】：

你听起来很沮丧，感觉很好 :) 创建一个小提琴。
self.DurationSecs vs. data-bind="value: DurationSec" ...您有一个额外的s，顺便说一下，您应该在浏览器的控制台中看到绑定错误...
nemesv - 我以为我会在 Javascript 调试窗口中看到这样的错误，但没有。所以我今天学到了另一件事：当 KnockoutJS 遇到问题时，一定要检查控制台窗口。这就是我喜欢 StackOverflow 的原因...

标签： javascript jquery jquery-mobile knockout.js

【解决方案1】：

DurationSec

应该是

DurationSecs

http://jsfiddle.net/HWD6P/

我删除了 jquery 只是因为我没有在示例中使用它。

【讨论】：

Sheesh - 对不起那个。有时你会看很长时间，以至于明显的东西溜走了。但我确实学到了一些东西：当一个绑定被错误命名时，它之后的所有绑定也将停止工作。