Question

我有这个问题两次打印用户数据，这是代码：

window.UserData = {}
UserData.Model = Backbone.Model.extend();
UserData.Collection = Backbone.Collection.extend({
  url: '/test.php?c=userData',
  model: UserData.Model,
  parse: function (response) {
    return response.data;
  }
});
UserData.View = Backbone.Marionette.CompositeView.extend({
  tagName: 'span',
  template: Handlebars.compile($('#user-data-template').html())
});
BaseApp.Layout = Backbone.Marionette.Layout.extend({
  template: Handlebars.compile($('#base-layout-template').html()),
  regions: {
    'region_user_data': '#user_data_reg'
  },
  initialize: function () {
    _.bindAll(this);
  },
  onRender: function () {
    var self = this;
    var c = new UserData.Collection();
    c.fetch({
      success: function () {
        var ud = new UserData.View({
          collection: c
        });
        self.region_user_data.show(ud);
      }
    });
  }
});

此BaseApp布局在区域（正文）中呈现一次。

这是模板：

<script id='user-data-template' type='text/x-handlebars-template'>
    <a href="#" id="logout"> Logout </a> Hola {{uname}}
</script>

<script id='base-layout-template' type='text/x-handlebars-template'>
    base page layout
    <div id="user_data_reg" class="user_data_reg"></div>
</script>

这是浏览器中显示的内容（chrome）：

Logout Hola Logout Hola 14

正如你所看到的那样，它显示了两次用户布局，但是第一次没有显示uname，这有点奇怪，因为在chrome中我有这个：

child {models: Array[0], length: 0, _byId: Object, 
constructor: function, url: "http://localhost/test.php?c=userData"…}

模型仅显示1，它的作用是打印两次内容。

当我获取集合数据时，我这样做：

c.fetch({
  success: function () {
    var ud = new UserData.View({
      collection: c
    });
    self.region_user_data.show(ud);
    console.log("print xx");
  }

它只记录“print xx”一次＆amp;不是我预期的两倍。

为什么我获得双重userData内容，即使该集合仅提取单个模型，为什么会发生这种情况？问候。

Answer 1

这是视图类型的问题，而不是使用“CompositeView”我切换到ItemView并且问题消失了。我猜Marionette强制将ItemView用于单个数据。

Backbone Marionette，两次渲染复合视图？

1 个答案: