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

Question

民间 我正在使用backbonejs（0.9）与最新的jQuery Mobile（1.3）。我正在使用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和txnsLoadedPromise缓存的模板被“解决”一旦从的WebSQL数据库记录被载入：

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'}) 

而且changePage方法PageUtil类：

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