如何从 Backbone 视图在动态客户端模板中渲染 jQuery Mobile？

Question

我正在使用 Brunch 构建一个移动网站。

对于用户界面，我想使用 jQuery Mobile。

我开始这样调整现有的 home_view (Backbone.View)：

class exports.HomeView extends Backbone.View
  id: 'home-view'

  render: ->
    console.log "render() homepage"

    $(@el).html require('./templates/home')

    $.mobile.changePage('#homepage', 'slide', false, false)
    console.log $(@el)

    @

这不起作用，我怀疑这是因为 Backbone 在 jQuery Mobile 初始化之前或之后“注入”了 html 或者其他什么？

我可以使用 Firebug 和 Chrome 的 Inspect Element 检查标记，但 div 元素设置为 display:none; （所以这似乎再次表明 jQuery Mobile 没有初始化或类似的东西）

./templates/home 是一个简单的“eco”模板，带有一些基本的 jQuery Mobile 标记，它看起来像这样：(并被注入到 body 标签中）

<div data-role="page" id="homepage">
    <div data-role="navbar">
        <ul>
            <li><a href="/" class="ui-btn-active">Home</a></li>
        <li><a href="#helppage">Help</a></li>
    </ul>
    </div><!-- /navbar -->

    <div data-role="content">
        <div id="home">
            <h1>Home</h1>
        </div>
    </div>
</div>

我已经在 SA 和 Google 上搜索了解决方案，但没有成功。任何提示将不胜感激。谢谢！

Answer 1

正如这个问题的评论中所述< /a>，您可以在渲染页面后执行此操作：

$("#pageId").trigger("create");

这将强制 jQuery Mobile 更新您的页面并解决您的问题。

Answer 2

在你的渲染函数中尝试：

render:function(){
var container = this.options.viewContainer;

// your code

container.html($(this.el));
container.trigger('create');
return this;
}

这对我来说效果很好；）

Answer 3

按照 Sandor 的说法，但我处理此问题的方法是在 'pagebeforeshow' 期间触发 'create' 事件，如下所示：

$('#pageId').bind('pagebeforeshow', function(event) {
   var currentPage = event.currentTarget;
   $(currentPage).trigger('create');
});

这将应用您在重新渲染你的 DOM。

Answer 4

上面的答案涉及使用 $(currentPage).trigger('create'); 修复了问题，但因为修复是在之后应用的（在视图页面渲染并由 < code>$.mobile.changePage()) 用户会得到一个令人不快的副作用：由于 jquery mobile 应用的样式更改，视图会闪烁。

我对该问题的解决方案是在动态渲染完成后从视图触发自定义事件，并将 $.mobile.changePage() 绑定到该事件。这会导致输出被“缓冲”直到完成，然后一起设计样式。

这是一个示例：

在我的视图的 initialize 函数中，我有代码等待模型/集合在获取时触发事件，以及渲染 html 动态部分的函数：

window.MyView = Backbone.View.extend({

// some other code here

initialize: function() {
    this.listenTo(this.collection, "fetchCompleted:CollectionName",  this.renderRows);
},

renderRows: function (eventName) {
    $(this.el).find('div[class="content-primary"]').html(this.template_ul({data: this.collection}));
    this.trigger( 'view:ready' );
},
//...

...然后在路由器中，我有以下 changePage() 代码：

myViewObject.on( 'view:ready', function() {
    $.mobile.changePage($(next.el), {changeHash:false, transition: transition});
});