[英]Backbone.js: Table not presenting correcting with templates
I have 3 separate templates, one for the head of a table the other for contents and the third for the closing tags. 我有3个单独的模板,一个用于表头,另一个用于内容,第三个用于结束标记。 When I created the hole table and place it into a template altogether it looks like so:
当我创建孔表并将其完全放入模板时,它看起来像这样:
But when I split it into three templates I get the following: 但是,当我将其分为三个模板时,我得到以下信息:
The table never forms correctly and the body of the table seem to ignore the head of the table. 该表永远不会正确地形成,并且表的主体似乎忽略了表头。 and never spreads out.
永不扩散。 If I remove the head template the body dosent change.
如果我移除头部模板,身体剂量会改变。
Here is the code : 这是代码:
AbsenceList.js AbsenceList.js
window.AbsenceListView = Backbone.View.extend({
initialize: function() {
this.template1 = _.template(tpl.get('tableEnd'));
this.template2 = _.template(tpl.get('tableStart'));
this.model.bind("reset", this.render, this);
var self = this;
this.model.bind("add", function(absence) {
$(self.el).append(new AbsenceListItemView({
model: absence
}).render().el);
});
},
render: function(eventName) {
$(this.el).html(this.template2());
_.each(this.model.models, function(absence) {
$(this.el).append(new AbsenceListItemView({
model: absence
}).render().el);
}, this);
$(this.el).append(this.template1());
return this;
}
});
window.AbsenceListItemView = Backbone.View.extend({
initialize: function() {
this.template = _.template(tpl.get('absence-table_1'));
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
render: function(eventName) {
$(this.el).append(this.template(this.model.toJSON()));
return this;
}
});
tableStart.html tableStart.html
<table class="table table-bordered table-striped" id="example-default">
<thead>
<tr>
<th>Name</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Fridays</th>
</tr>
</thead>
<tbody>
TableEnd.html TableEnd.html
</tbody>
</table>
AbsenceTable.html AbsenceTable.html
<tr><td><a href='#student/<%= studentidStudent %>'> <button>Link</button></a></td>
<td><% if (monday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (monday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (tuesday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (tuesday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (wednesday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (wednesday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (thursday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (thursday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
<td><% if (friday == true) { %> <span class="glyphicon glyphicon-ok"></span><%} else if (friday == false) { %><span class="glyphicon glyphicon-remove"></span><%} %></td>
</tr>
What is the reason for the body of the table not aligning with the head ? 桌子的主体与头部不对齐的原因是什么?
jQuery's append
is not a simple text concatenation. jQuery的
append
不是简单的文本串联。 If you give a string, it will convert that string to a set of DOM nodes and insert those nodes. 如果提供字符串,它将将该字符串转换为一组DOM节点并插入这些节点。 If you give
append
a string that contains invalid HTML, then the browser will do its best to fix your HTML before it adds any nodes to the DOM. 如果给
append
一个包含无效HTML的字符串,则浏览器将尽力修复HTML,然后再将任何节点添加到DOM。
You're adding this "HTML": 您要添加以下“ HTML”:
<table class="table table-bordered table-striped" id="example-default">
<thead>
...
</thead>
<tbody>
but that's not valid HTML so the browser will probably convert it to this: 但这不是有效的HTML,因此浏览器可能会将其转换为:
<table class="table table-bordered table-striped" id="example-default">
<thead>
...
</thead>
<tbody>
</tbody>
</table>
before it hits the page. 在它到达页面之前。 Then you try to add a more invalid stuff through your
AbsenceListItemView
(ie <tr>
s that aren't inside <thead>
, <tbody>
, or <table>
) so the browser will try to make sense of that. 然后,您尝试通过
AbsenceListItemView
添加更多无效的内容(即不在<thead>
, <tbody>
或<table>
内的<tr>
<table>
),因此浏览器将设法使之有意义。 Finally, you try to append: 最后,您尝试附加:
</tbody>
</table>
which the browser will probably convert to: 浏览器可能会将其转换为:
<table>
<tbody>
</tbody>
</table>
and you end up with an incomprehensible mess. 最终导致一团混乱。
You need to treat your <table>
as a single unit. 您需要将
<table>
视为一个单元。 Combine your tableEnd
and tableStart
into something valid: 将您的
tableEnd
和tableStart
合并为有效的内容:
<table class="table table-bordered table-striped" id="example-default">
<thead>
...
</thead>
<tbody>
</tbody>
</table>
and then append the AbsenceListItemView
s to the <tbody>
in there: 然后将
AbsenceListItemView
附加到其中的<tbody>
:
render: function (eventName) {
this.$el.html(this.template()); // This has both pieces.
this.collection.each(function(model) {
this.$('tbody').append(new AbsenceListItemView({model: model}).render().el);
}, this);
return this;
}
Note a few other changes: 注意其他一些变化:
model
was actually a collection so you should use this.collection
instead of this.model
inside the view and say new AbsenceListView({ collection: ... })
when instantiating the view. model
实际上是一个集合,因此您应在视图内部使用this.collection
而不是this.model
,并在实例化视图时说出new AbsenceListView({ collection: ... })
。 this.$el
inside the view instead of creating a new jQuery wrapped version all the time by calling $(this.el)
over and over again. this.$el
,而不是一遍$(this.el)
调用$(this.el)
来$(this.el)
创建新的jQuery包装版本。 Backbone creates this.$el
for you so you should use it. this.$el
,因此您应该使用它。 this.$()
to find this within your view's el
, this is a shortcut for this.$el.find(...)
that Backbone sets up for you. this.$()
在视图的el
找到它,这是Backbone为您设置的this.$el.find(...)
的快捷方式。 this.collection.each(...)
instead of mucking around with the collection's models
property with things like _.each(this.collection.models, ...)
. this.collection.each(...)
方法混合到集合中,因此您可以说this.collection.each(...)
而不是像_.each(this.collection.models, ...)
这样_.each(this.collection.models, ...)
集合的models
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.