2

我正在创建一个使用 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();
});
4

2 回答 2

4

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

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

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

于 2012-05-02T11:24:47.590 回答
1

如果所有 DOM 更改都在 jQuery Mobile 开始设置页面样式之前完成，它会工作得很好。但是，Backbone.js 的事件会导致页面的某些部分异步重新呈现，从而使页面的某些部分没有样式。

调用 .trigger("pagecreate") 或 "create" 会触发 jQuery Mobile 重新设置页面/元素的样式。

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

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

于 2012-05-13T20:45:27.497 回答