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