Question

我对淘汰和jquery移动有点新鲜，有一个问题已经回答了，我需要优化PageStateManager类来使用泛型绑定，目前PageStateManager只能用于一个绑定，我真的很感激，如果有人可以指导我创建一个通用类来管理具有敲除绑定的页面状态Heere是工作代码，http://jsfiddle.net/Hpyca/14/

PageStateManager = (function () {
    var viewModel = {
        selectedHospital: ko.observable()
    };

    var changePage = function (url, viewModel) {
        console.log(">>>>>>>>" + viewModel.id());
        $.mobile.changePage(url, {viewModel: viewModel});
    };

    var initPage = function(page, newViewModel) {
        viewModel.selectedHospital(newViewModel);
    };

    var onPageChange = function (e, info) {
        initPage(info.toPage, info.options.viewModel);
    };

    $(document).bind("pagechange", onPageChange);
    ko.applyBindings(viewModel, document.getElementById('detailsView'));

    return {
        changePage: changePage,
        initPage: initPage
    };
})();

HTML

<div data-role="page" data-theme="a" id="dashBoardPage" data-viewModel="dashBoardViewModel">
    <button type="button" data-bind="click: goToList">DashBoard!</button>
</div>

新的信息中心模型

    var dashBoardViewModel = function() {
        var self = this;
        self.userName = ko.observable('Welcome! ' + "UserName");
        self.appOnline = ko.observable(true);

        self.goToList = function(){
            //I would like to use PageStateManager here 
    //        PageStateManager.changePage($("#firstPage"),viewModel);
            ko.applyBindings(viewModel,document.getElementById("firstPage"));//If I click Dashbord button multiple times it throws and multiple bind exception
            $.mobile.changePage($("#firstPage"));  
        }
    }
ko.applyBindings(dashBoardViewModel,document.getElementById("dashBoardPage"));

更新网址：http://jsfiddle.net/Hpyca/14/ 提前谢谢

Answer 1

我可能会创建一个NavigationService，它只处理更改页面并让knockout和我的视图模型处理页面的状态。

此类NavigationService的一个简单示例可能是：

function NavigationService(){
    var self = this;

    self.navigateTo = function(pageId){
        $.mobile.changePage($('#' + pageId));
    };
}

然后，您可以在视图模型中调用它，以便在需要导航到新页面时调用它。一个例子是选择医院（可以通过选择功能或通过手动订阅selectedHospital可观察的更改来完成：

self.selectHospital = function(hospital){
    self.selectedHospital(hospital);
    navigationService.navigateTo('detailsView');
};

除了调用navigationService进行导航之外，它只是普通的淘汰赛，以跟踪哪个视图模型应该绑定到哪里。如果你问我的话，比让jquery移动跟踪哪个视图模型去哪里要容易得多。

我已经更新了你的jsfiddle，以显示如何完成此操作的示例，尽可能少地对HTML代码进行更改。您可以在http://jsfiddle.net/Hpyca/15/

找到更新的小提琴

创建一个通用类，将knockout对象与页面绑定

1 个答案: