2

backkbone.js と jquery mobile を使用するモバイル ビューを作成しています。

jquery モバイルのlistviewを使用するようにスタイル設定された、ページにレンダリングするコレクションがあります。コレクションがロードされ、正しい html を使用してページにレンダリングされますが、jquery モバイルでのレンダリング方法ではなく、スタイル設定されていないリストとしてレンダリングされます。次に、リストを調べて、それを html としてコピーし、静的 html として html ページに貼り付けると、その html が正しく表示されます!

私は何を間違っていますか？これは、backbone.js と jquery モバイルの両方への私の最初の進出であるため、単純なものになる可能性があります。

コード：

私のテンプレート:

<script id="change-template" type="text/template">
<a href="#">{{ Description }}</a>
<p>{{ ChannelLabel }}</p>
</script>

<script id="changes-template" type="text/template">
<ul id="changes-list" data-role="listview" data-inset="false" data-filter="true"></ul>
</script>

私の見解：

window.ChangeView = Backbone.View.extend({

    tagName: 'li',

    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#change-template').html());
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
})

window.ChangesView = Backbone.View.extend({

    tagName : "div",

    initialize: function () {
        _.bindAll(this, 'render');
        this.template = _.template($('#changes-template').html());
        this.collection.bind("reset", this.render);
    },

    render: function () {

        var collection = this.collection;

        // Render the template
        $(this.el).html(this.template({}));

        // Then get a handle to the element inside the template.
        var $changes = this.$('#changes-list');

        this.collection.each(function(change) {
            var view = new ChangeView({model: change, collection: collection});
            $changes.append(view.render().el);
        })

        return this;
    }
});

HTML 出力の例:

<div id="changes" data-role="content" class="ui-content" role="main">
<ul id="changes-list" data-role="listview" data-inset="false" data-filter="true"><li>
  <a href="#">Link Up</a>
  <p>GF1A-R2P24 - 23</p>
  </li><li>
  <a href="#">Link Down</a>
  <p>GF1A-R2P24 - 23</p>
  </li></ul>
</div>

これは私がページをロードする方法です：

$(document).bind('pageinit',function () {

    window.changes = new Changes();
    var view = new ChangesView({ collection: changes, el:"#changes" });
    changes.fetch();
});
4

2 に答える 2

4

わかりましたので、周りを見回すと、これを追加すると問題が解決することがわかりました。

$(this.el).trigger( "pagecreate" );

しかし、これは間違っているように感じます。なぜ自分でそのイベントをトリガーする必要があるのでしょうか?

于 2012-05-02T11:24:47.590 に答える
1

jQuery Mobile がページのスタイル設定を開始する前にすべての DOM 変更が完了していれば、問題なく動作します。ただし、Backbone.js のイベントにより、ページの一部が非同期で再レンダリングされ、ページの一部がスタイルされないままになります。

.trigger("pagecreate") または "create" を呼び出すと、jQuery Mobile がトリガーされ、ページ/要素のスタイルが変更されます。

(jQuery Mobile はページを表示するたびに data- 属性を読み取り、適切なスタイルを適用します。)

jQuery Mobile と Backbone.js は別のフレームワークであるため、これが必要です。

于 2012-05-13T20:45:27.497 に答える