创建一个泛型类来将敲除对象与页面绑定

Create a generic class to bind knockout object with pages

本文关键字：对象 绑定 泛型类 一个 创建      更新时间：2023-09-26

我对knocket和jquery mobile有点陌生，有一个问题已经回答了，我需要优化PageStateManager类以使用通用绑定，目前PageStateManager只能用于一个绑定，如果有人能指导我创建一个通用类来管理具有knocket绑定的页面状态，我将不胜感激。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"));

更新url:http://jsfiddle.net/Hpyca/14/提前感谢

我可能会创建一个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/

相关文章：