页面导航-带有tickout.js的jQuery Mobile

Question

我正在使用jQuery Mobile和kickout.js处理跨平台的移动应用程序。 我需要知道重定向到下一页的正确方法。 我看过的所有示例都说明了具有多个页面的单个HTML文件。 是否可以为每个页面创建单独的HTML文件并为每个HTML页面维护一个单独的JS文件。 另外，如何将视图模型链接到每个页面？

我的问题如下...

1. 如何从Index.html重定向到Search.html并在这些页面之间传递数据？
2. 如何为每个页面创建单独的HTML并与视图模型链接？

工作代码示例

Index.html

 <div data-role="page" id="Index">
        <div data-role="header">
            <h1>
                jQM</h1>
        </div>
        <div data-role="content" data-iscroll>
            This is jQM Testing
            <label for="arrCity">
            </label>
            <input type="text" class="autocomplete" data-bind="value:aCity" />
            <div data-bind="aCity">
            </div>
            <input id="btn" type="button" data-bind="click:showData" value="showData" />
        </div>
        <div data-role="footer">
            <h1>
                jQM Footer</h1>
        </div>
    </div>

search.html

div id="second" data-role="page">
    <div data-role="header">
        <h1 data-bind="text: greeting">
        </h1>
    </div>
</div>

Index.js

$(document).ready(function () {
    ko.applyBindings(ReqModel, document.getElementById('Index'));

});



var ReqModel = new ReqModel();
function ReqModel() {
    this.aCity = ko.observable('');
    this.showData = function () {
        alert(this.aCity());
        $.mobile.changePage("search.html");


    };
}

search.js

var ResviewModel = new ResviewModel(ReqModel);


function ResviewModel(data) {
    alert("this load");
}

$(document).ready(function () {
    var pre = document.getElementById('Index');
    ko.cleanNode(pre);
    ko.applyBindings(ResviewModel, document.getElementById('second'));
});

Answer 1

关于第一个问题：

如何从Index.html重定向到Search.html并在这些页面之间传递数据？

我使用jQuery.navigate解决了这个问题（也可以在NuGet上找到 ），希望这对您有帮助吗？

Answer 2

我建议你这样做。 代替使用输入，使用锚

<a href="search.html" id='btn' data-bind="click:showData">showData</a>

确保调用的函数返回true或false

this.showData = function () {
    alert(this.aCity());
    return true
};

返回true将使您移至下一页。

对于结构方式，您可以看到此信息 。