0

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

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

4

1 回答 1

1 
DurationSec

应该

DurationSecs

http://jsfiddle.net/HWD6P/

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

于 2013-10-22T20:53:43.740 回答