[英]Why my Marionette itemView does not render?
I'm using Marionette with Handlebars templates and I can't get my itemView to render inside a CollectionView. 我将木偶与车把模板一起使用,但无法将我的itemView呈现在CollectionView中。
Here is the CollectionView code: 这是CollectionView代码:
define( [ 'App', 'marionette', 'handlebars', 'models/Model', 'collections/Collection', 'text!templates/welcome.html'],
function(App, Marionette, Handlebars, Model, Collection, template) {
//ItemView provides some default rendering logic
var ItemView = Marionette.ItemView.extend( {
//Template HTML string
template: Handlebars.compile(template),
//model: new Model(),
// View Event Handlers
events: {
},
initialize: function(o) {
console.log('init itemView');
}
});
return Marionette.CollectionView.extend( {
issues: new Collection(),
itemView: ItemView,
onRender: function() {this.issues.fetch()},
initialize: function(o) { console.log('init collectionView')}
});
});
here is the template 这是模板
<div class="hero-unit">
<h1>Marionette-Require-Boilerplate Lite</h1>
<p>Lightweight Marionette Boilerplate application to get you off the ground fast.</p>
<p class="muted">
You are viewing this application on
</p>
<br/>
<table>
{{#each items}}
<tr><td>{{title}} - {{number}}</td></tr>
{{/each}}
</table>
<a class="btn btn-primary btn-large" href="https:github.com/BoilerplateMVC/">See more Boilerplates</a>
The only thing I get from this code is that the CollectionView does trigger its initialize method and that the collection is fetched from GitHub. 我从这段代码中得到的唯一一件事是CollectionView确实触发了它的initialize方法,并且该集合是从GitHub获取的。
There are multiple reasons this could not be working, depending on the Marionette version you are using: 根据您使用的木偶版本,有多种原因导致此方法无法正常工作:
The items to display are expected in the property 'collection' not 'issues'. 显示的项目应在属性“集合”中而不是“问题”中。
example: 例:
var IssuesView = Marionette.CollectionView.extend({ childView: IssueView, onRender: function () { this.collection.fetch(); }, initialize: function (o) { console.log('init collectionView'); } }); new IssuesView({'collection': new Backbone.Collection()});
Now, based on the code you provided, I assume your goal is to display the issues inside 'items', if that is correct, I will suggest to use a 'CompositeView' instead, and then you can provide a 'container' and render the 'issues' inside the items. 现在,根据您提供的代码,我假设您的目标是在“项目”中显示问题,如果正确,我建议改用“ CompositeView”,然后您可以提供“容器”并进行渲染项目内部的“问题”。 For example:
例如:
var IssueView = Marionette.ItemView.extend({
itemTag: 'tr',
//Template HTML string
template: Handlebars.compile($("#item-template").html()),
//model: new Model(),
// View Event Handlers
events: {
},
initialize: function (o) {
console.log('init itemView');
}
});
var IssuesView = Marionette.CompositeView.extend({
childView: IssueView,
childViewContainer: "#issues",
template: Handlebars.compile($("#some-template").html()),
onRender: function () {
//this.issues.fetch();
},
initialize: function (o) {
console.log('init collectionView');
}
});
Where your templates are: 您的模板在哪里:
<script id="item-template" type="text/x-handlebars-template">
<td>
{{title}} - {{number}}
</td>
</script>
<script id="some-template" type="text/x-handlebars-template">
<div class = "hero-unit" >
<h1>Marionette - Require - Boilerplate Lite </h1>
<p>Lightweight Marionette Boilerplate ...</p>
<p class = "muted"> You are viewing this application on </p>
<br/>
<table id="issues">
</table>
</script>
Here is jsfiddle with a working version of this: http://jsfiddle.net/gvazq82/v5yj6hp4/2/ 这是jsfiddle及其工作版本: http : //jsfiddle.net/gvazq82/v5yj6hp4/2/
Your problem is that you're not specifying a collection in your CollectionView. 您的问题是您没有在CollectionView中指定集合。 You want to instead do
你想做
var collectionView = Marionette.CollectionView.extend({
collection: new issues
...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.