Question

我已经与KnockoutJS合作了一段时间，并且已经成功运行了十几个JQuery Mobile页面。但是，我刚创建了一个拒绝正常工作的页面，即使它很简单。我以为我会把页面剥离到它的基本要素，然后重新构建它直到我发现问题...但是 bare essentials 甚至没有工作！

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

此页面如图所示，仅绑定第一个输入。第二个输入字段和两个跨度从不绑定。正如我所说，我已经做了好几个月了，并且从未遇到过这种奇怪的拒绝绑定变量的问题。我真的可以在这里使用一些帮助，因为我一直在敲打它并将其简化几个小时以查看错误并且无法理解为什么它不起作用！

Answer 1

DurationSec

应该是

DurationSecs

http://jsfiddle.net/HWD6P/

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

为什么这个简单的 KnockoutJS页面不起作用？

1 个答案:

为什么这个*简单的* KnockoutJS页面不起作用？

1 个答案:

为什么这个简单的 KnockoutJS页面不起作用？