Marionette Composite 데이터 채우기 오류보기

Question

Marionete와 백엔드를 배우기 시작했습니다. 모듈 및 디스플레이를 사용하려고 시도 중입니다. 지금까지 일부 레코드가 실패했습니다. 인터넷에서 찾을 수있는 예제가 거의 없습니다. 누군가가 나를 도울 수 있으면 기뻐하십시오. 나는 왜 리더 테이블이 3 번 표시되는지 이해할 수 없었다.

채우기 대신 값을 입력하면 템플릿 (리더 테이블)이 세 번 표시됩니다.

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

Fistname 성

Fistname 성

Fistname 성

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

HTML 생산

<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에서 변경되었으므로 코드도 변경해야합니다. 에서

당신의 템플릿에 itemView들 첨부 (이전 버전에서 사용, 이제라고 attachHtml) appendHtml 방법을 사용할 필요가 없습니다 UserModule.TableViewcompositeView.

childViewContainer (이전 버전의 경우 itemViewContainer)이라는 새 속성을 추가하고 itemView을 추가해야하는 선택기를 지정하기 만하면됩니다. > childView

itemViewContainer - -> childViewContainer

코드의 전체 모습과 같이 표시됩니다 (실행

itemView을 : 변경해야

여기에 몇 가지 attrubutes 코드 스 니펫 및 결과보기) :

$(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>