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

乡亲们 我将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）。路由器已经在路由器中缓存了模板。模板和txnsLoadedPromise在加载websql中的db记录后会得到“解析”：

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

我的观点是这样的：

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

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

以及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);

---

有什么想法吗？

您的代码有问题

第一个

触发器（'create'）

只对内容部分有效，使用

触发器（'pagecreate'）

增强页眉+内容+页脚

在我的另一个中阅读更多关于它的信息。或者找到它

在这里，您将找到一个动态添加页脚内容的工作示例

如果您正在添加动态导航栏元素，那么即使是

触发器（'pagecreate'）

也帮不了您。 但是有一个：

$('#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;   
    }
}

$（'#index'）.live（'pagebeforeshow'，函数（e，数据）{
addNewNavBarElement（'navbar-test'，'el4'，'Page Four'）；
});
var navbarHandler={
addNewNavBarElement:函数（navBarID、newElementID、newElementText）{
var navbar=$（“#”+navBarID）；
var li=$（“
”）；
变量a=$（“”）；
a、 attr（“id”，newElementID）.text（newElementText）；
li.附加（a）；
navbar=navbarHandler.clearNavBarStyle（navbar）；
导航栏。导航栏（“销毁”）；
li.附录（$（“#”+navBarID+“ul”）；
navbar.navbar（）；
},
clearNavBarStyle:函数（导航栏）{
navbar.find（“*”）和self（）.each（function（））{
$（this）.removeClass（函数（i，cn）{
var matches=cn.match（/ui-[\w\-]+/g）| |[]；
return（matches.join（“”））；
});
if（$（this.attr（“类”）=“”）{
$（此）.removeAttr（“类”）；
}
});
返回导航条；
}
}

谢谢Gajotres！我实际上不需要增强页眉或页脚，因为我不会动态更改它们。我增强页眉的唯一原因是，由于我在页面呈现后进行了渲染，它可能会出错。让我阅读这些文章，然后回去看看它们是否解决了问题。页面创建没有起作用我的答案是正确的，因为我从你的文章中学到了一些东西：）

$('#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;   
    }
}