Question

我是新手，刚刚开始学习Marionete和backnone，我正在尝试使用模块和显示器，到目前为止一些记录我没有成功，并且我可以在互联网上找到一些例子我会很高兴如果有人可以提供帮助我。我无法弄清楚为什么（领导者表）显示三次。

在UI上输出，而不是填充值，模板（leader-table）显示三次。

==============================

Fistname姓氏

==============================

HTML PRODUCE

<table id="mylist" class="table-striped table-bordered">
<thead>
<tbody> </tbody>
<table id="mylist" class="table-striped table-bordered">
<table id="mylist" class="table-striped table-bordered">

==============================

 <div id="AppBase"></div>   
<script type="text/template" id="leader-table">
  <thead>
    <tr class='header'>
      <th>Fistname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</script>

<script type="text/template" id="user-list">
  <td><%= fname %></td>
    <td><%= lname %></td>
</script>

 $(function () {

 var app = new Backbone.Marionette.Application();

  app.addRegions({
  appRegion: '#AppBase'
   });

app.module('App',function(UserModule, App, Backbone, Marionette, $, _){

UserModule.UserModel = Backbone.Model.extend({
    defaults: { fname: '',lname: ''}
});

UserModule.UserCollection = Backbone.Collection.extend({
    model: UserModule.UserModel,
    comparator: 'lname'
});

UserModule.UserItemView = Marionette.ItemView.extend({
    tagName: 'tr',
    template: '#user-list',
});

UserModule.TableView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
id: "mylist",

className: "table-striped table-bordered",
template: "#leader-table",
itemView:  UserModule.UserItemView,

appendHtml: function(collectionView, itemView){
 collectionView.$("tbody").append(itemView.el);
}

});
UserModule.addInitializer(function(){
    var UserList = [];
        UserList.push({fname: 'John',lname: 'Taylor' });
        UserList.push({fname: 'Smith', lname: 'Price'});
    var datalist = new UserModule.UserCollection(UserList);
    var UserCollectionView = new UserModule.TableView({collection: datalist});
    app.appRegion.show(UserCollectionView);
});
});

  app.start();

});

Answer 1

Marionette V2.2.0中已经更改了很多内容，因此您的代码也需要更改。

在UserModule.TableView compositeView中，您无需使用appendHtml（在旧版本中使用，现在称为attachHtml）方法来附加itemView s到模板。

只需添加名为childViewContainer的新属性（对于名为itemViewContainer的旧版本），并指定需要追加itemView的选择器。

这里有一些你需要更改的内容：

itemView - ＆gt; childView

itemViewContainer - ＆gt; childViewContainer

代码的完整外观将如下所示（运行代码段并查看结果）：

$(function () {

 var app = new Backbone.Marionette.Application();

  app.addRegions({
  appRegion: '#AppBase'
   });

app.module('App',function(UserModule, App, Backbone, Marionette, $, _){

UserModule.UserModel = Backbone.Model.extend({
    defaults: { fname: '',lname: ''}
});

UserModule.UserCollection = Backbone.Collection.extend({
    model: UserModule.UserModel,
    comparator: 'lname'
});

UserModule.UserItemView = Marionette.ItemView.extend({
    tagName: 'tr',
    template: '#user-list',
});

UserModule.TableView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    id: "mylist",
    className: "table-striped table-bordered",
    template: "#leader-table",
    childView:  UserModule.UserItemView,
    childViewContainer: 'tbody'
});
UserModule.addInitializer(function(){
    var UserList = [];
        UserList.push({fname: 'John',lname: 'Taylor' });
        UserList.push({fname: 'Smith', lname: 'Price'});
    var datalist = new UserModule.UserCollection(UserList);
    var UserCollectionView = new UserModule.TableView({model: new (Backbone.Model.extend({})), collection: datalist});
    app.appRegion.show(UserCollectionView);
});
});

  app.start();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"></script>




<div id="AppBase"></div>   
<script type="text/template" id="leader-table">
  <thead>
    <tr class='header'>
      <th>Fistname</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</script>
<script type="text/template" id="user-list">
  <td><%= fname %></td>
    <td><%= lname %></td>
</script>

Marionette Composite查看数据填充错误

1 个答案: