Question

我正在创建一个使用backkbone.js和jquery mobile的移动视图。

我有一个我呈现给页面的集合，使用jquery mobile的listview进行设置。该集合加载并在页面上使用正确的html呈现，但呈现为未样式列表，而不是它应如何在jquery mobile中呈现。如果我然后检查列表，将其复制为html，并将其粘贴到我的html页面作为静态html，html正确显示！

我做错了什么？这是我第一次涉足backbone.js和jquery mobile，所以它可能很简单。

代码：

我的模板：

<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();
});

Answer 1

好的，所以通过环顾四周，我发现添加它解决了这个问题：

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

但这感觉不对 - 为什么我需要自己触发该事件？

Answer 2

如果在jQuery Mobile开始设置页面样式之前完成了所有DOM更改，那么它可以正常工作。但是，Backbone.js'事件会导致页面的某些部分异步重新呈现，从而使页面的某些部分保持不正常。

调用.trigger（“pagecreate”）或“create”会触发jQuery Mobile来重新设置页面/元素。

（每当jQuery Mobile显示一个页面时，它会读取数据属性并应用适当的样式。）

这是必要的，因为jQuery Mobile和Backbone.js是独立的框架。

Backbone.js - 使用jquery移动渲染渲染集合而无需样式化

2 个答案: