创建一个通用类将淘汰对象与页面绑定 [英] Create a generic class to bind knockout object with pages

问题描述

我对淘汰赛和jquery mobile有点陌生，已经回答了一个问题，我需要优化PageStateManager类以使用通用绑定，目前PageStateManager只能用于一个绑定，如果有人可以的话，我将不胜感激指导我创建一个通用类来管理具有剔除绑定的页面状态Heere是有效的代码， http://jsfiddle.净/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/ 预先谢谢你

解决方案

我可能会创建一个NavigationService，该NavigationService仅处理更改页面并让剔除和视图模型处理页面状态.

这样的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调用之外，它只是普通的敲除项，用于跟踪应将哪个viewmodel绑定在何处.如果您问我，这比让jquery mobile跟踪哪个视图模型去哪里要容易得多.

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

I am bit new to knockout and jquery mobile, There was a question which is already answered, I need to optimize the PageStateManager class to use generic bindings, currently PageStateManager can only use for one binding,I would really appreciate if someone can guide me to create a generic class to manage page states with knockout bindings Heere is the working code,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>

New dashboard model

    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"));

update url : http://jsfiddle.net/Hpyca/14/ Thank you in advance

解决方案

I would probably go for creating a NavigationService which only handles changing the page and let knockout and my view models handle the state of the pages.

An simple example of such a NavigationService could be:

function NavigationService(){
    var self = this;

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

You could then, in your view models just call it when you want it to navigate to a new page. One example would be upon selection of a hospital (which could be done either via a selection function or by manually subscribing to changes to the selectedHospital observable):

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

Other than the call to the navigationService to navigate, it's just ordinary knockout to keep track of which viewmodel should be bound where. A lot easier than having jquery mobile keeping track of which viewmodel goes where, if you ask me.

I have updated your jsfiddle to show a sample of how this could be done, making as few changes as possible to the HTML code. You can find the updated fiddle at http://jsfiddle.net/Hpyca/15/

这篇关于创建一个通用类将淘汰对象与页面绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！