Question

民间我正在使用backbonejs（0.9）和最新的jquery mobile（1.3）。我正在使用WebSql存储本地数据。加载主页时，我从本地数据库进行查询并使用jquery延迟在查询成功后呈现内容。不幸的是，jquery移动页脚没有得到“增强”。

视图的我的Haml模板很简单，如下所示：

%div{'data-role' => 'header'} %div{'data-role' => 'navbar', 'data-iconpos' => 'top'} %ul %li %a.ui-btn-active.ui-state-persist{'href' =>''}ATAB %li %a{'href' =>'#btab'}BTAB %div{'data-role' => 'content'} %div{'data-role' => 'footer', 'data-position' => 'fixed'} %a{'data-icon' => 'plus', 'href' => '#a_link'}A link

我的Backbonejs视图如下所示（我使用coffeescript）。路由器已经在router.templates中缓存了模板，并且一旦加载了来自websql的db记录，txnsLoadedPromise就会被“解析”：

window.HomeView = class HomeView extends Backbone.View initialize: (options) -> @template = Handlebars.compile(router.templates['/home/home']) render: () -> txnsLoadedPromise.then( @renderDynamic ) return this renderDynamic: () => if (transactions.length > 0) #generate content dynamically here and put in result result = {} $(@el).html(@template(result)) $('[data-role="header"]').trigger('create') $('[data-role="footer"]').trigger('create')

这就是我的观点：

我试图在触发器调用页脚中使用“refresh”而不是create，但它不起作用。奇怪的是，标题刷新工作正常。此外，如果我删除页面的动态性质（意味着直接呈现视图而不是解析承诺，那么它工作正常（这是预期的。）

为了完整起见，以下是我的路由器代码（相关部分）

window.MyRouter = class MyRouter extends Backbone.Router routes: "": "home" initialize: (options) -> #code for preloading view templates templates: {} home: () -> PageUtil.changePage new HomeView({templateKey: '/home/home'})

PageUtil类中的changePage方法：

window.PageUtil = class PageUtil @changePage: (view, overrideOptions={}, role='page') -> defaultOptions={transition: 'slide', reverse: false} options = $.extend(defaultOptions, overrideOptions) view.render(); $('body').append($(view.el)); if window.curentView console.log 'removing view: ', currentView window.currentView.remove() window.currentView = view $.mobile.changePage(view.$el, options);

有什么想法吗？

Answer 1

您的代码存在问题。

首先 trigger('create') 仅适用于内容部分，使用 trigger('pagecreate') 来增强标题+内容+页脚。

在我的其他 ARTICLE 中详细了解相关信息。或者找到 HERE 。

在那里你会找到一个动态添加的页脚内容的工作示例。

如果您要添加动态导航栏元素，那么即使 trigger('pagecreate') 也无法帮助您。但是有一个 working solution ：

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}

jquery移动页脚无法使用动态内容正确呈现

1 个答案: