伙计们,我正在使用带有最新 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);
有任何想法吗?