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

Question

伙计们 我正在使用带有最新 jquery mobile (1.3) 的主干js (0.9)。我正在使用 WebSql 来存储本地数据。当主页加载时，我从本地数据库进行查询并使用 jquery Deferred 在查询成功后呈现内容。不幸的是，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')

这是我的视图：

我尝试在页脚的触发器调用中使用“刷新”而不是创建，但它不起作用。奇怪的是，标题刷新工作正常。另外，如果我删除页面的动态特性（意味着直接渲染视图而不是在解决承诺时，那么它可以正常工作（这是预期的。）

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

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;   
    }
}