1

バックボーン 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>

4

2 に答える 2

1

OK、「.listview('refresh').trigger('create');」を追加して修正しました。最後まで

$(@.el).html(@template({data: data.models, _:_}))
于 2012-08-14T15:28:49.510 に答える
0

その後 (ビュー ページが によってレンダリングおよび表示された後に) 修正が適用されると$.mobile.changePage()、ユーザーは不快な副作用を受け取ります。jquery モバイルによって適用されるスタイルの変更により、ビューがちらつきます。

問題に対する私の解決策は、動的レンダリングが完了したらビューからカスタム イベントをトリガーし、$.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});
});
于 2014-03-13T14:45:21.750 に答える