Backbone 和 Jquery Mobile 渲染样式不起作用 - 用 CoffeeScript 编写答案

【问题标题】：Backbone & Jquery Mobile rendering styles not working - Written in CoffeeScriptBackbone 和 Jquery Mobile 渲染样式不起作用 - 用 CoffeeScript 编写
【发布时间】：2012-08-10 18:07:51
【问题描述】：

我正在使用主干 jquery 移动和咖啡脚本来开发一个简单的 twitter 应用程序。我的问题是 jquery 移动样式无法呈现。我的观点是

class HomeView extends Backbone.View
constructor: ->
    super

initialize: ->
    @Twitter= new TwitterCollection

template: _.template($('#home').html())

render: ->
    @loadResults()

loadResults: ->
    @Twitter.fetch({
        success: (data) =>
            $(@.el).html(@template({data: data.models, _:_}))

        error: ->
            alert('Error!')
    })

这在从 Twitter 中提取信息方面效果很好，但是当

$(@.el).html(@template({data: data.models, _:_}))

在 fetch 函数内，jquerys 样式不呈现。谁能告诉我如何刷新样式？非常感谢您的帮助！

供参考，html模板为：

<script type="text/template" id="home">

<div data-role="header" data-position="fixed">
    <h1>TWITTER DATA</h1>
</div>

<div data-role="content">
    <ul data-role="listview"  data-inset="true">
        <% _.each(data, function (row) { %>
            <li><a href="#tweet-<%= row.get('id') %>"><%= row.get('text') %></a></li>
        <% }); %>
    </ul>

    </ul>
</div>

【问题讨论】：

控制台是否有错误提示
重复？ stackoverflow.com/questions/6297470/…

标签： jquery-mobile backbone.js coffeescript

【解决方案1】：

之后应用修复时（在视图页面由$.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});
});

【讨论】：

【解决方案2】：

好的，我通过添加“.listview('refresh').trigger('create');”来修复它到结尾

$(@.el).html(@template({data: data.models, _:_}))

【讨论】：