0

私はしばらく KnockoutJS を使用しており、約 12 個の 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 を宣言します。これは、ページ全体でバインディングを適用する前にメソッドも呼び出すためです。

このページは、示されているように、最初の入力のみをバインドします。2 番目の入力フィールドと 2 つのスパンはバインドされません。私が言うように、私はこれを何ヶ月も行ってきましたが、変数のバインドに対するこの種の奇妙な拒否に遭遇したことはありません. 私はこれを叩き、何時間も単純化して何が間違っていて、なぜそれが機能していないのかがわからないので、ここで本当に助けを借りることができます!

4

1 に答える 1

1 
DurationSec

する必要があります

DurationSecs

http://jsfiddle.net/HWD6P/

この例で jquery を使用していないという理由だけで、jquery を削除しました。

于 2013-10-22T20:53:43.740 に答える