带有 Backbone 的模板和对性能的怀疑
Template with Backbone and doubts about performance
我在使用 Backbone/Underscore 模板时遇到了一些问题,因为我是网络开发的新手。
我读了这篇文章:
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout 我发现它真的很有趣,所以我试图编写相同的程序,但在 backbone.
我想用 id=col-12 将列表插入到 div 中,但 backbone 似乎无法做到这一点。对于我的错误,我深表歉意,但我以前从未在 Javascript 或 Html 中编程过,我确信我脑子里有一些困惑,你可以帮助我理解。
这是我的代码的一部分:
<script id="itemTemplate" type="text/template">
<%= name %>
</script>
$( document ).ready(function() {
// Model
var Item = Backbone.Model.extend({
});
// Collection
var ItemsCollection = Backbone.Collection.extend({
model: Item
});
// View for all elements
var ItemsView = Backbone.View.extend({
tagName : 'div',
el : $('#col-12'),
render: function() {
this.collection.each(function(item) {
var itemView = new ItemView({ model: item });
this.$el.append(itemView.render().el);
}, this);
return this;
}
});
// View for a single element
var ItemView = Backbone.View.extend({
tagName : 'span',
template: _.template($('#itemTemplate').html() ),
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
return this;
}
});
var runBackbone = document.getElementById("run-backbone");
runBackbone.addEventListener("click", function() {
var data = _buildData();
date = new Date();
// It creates the collection
var itemsCollection = new ItemsCollection;
for (var i = 0; i < data.length; i++)
{
newItem = new Item ({name: data[i].label});
itemsCollection.add(newItem);
}
var itemsView = new ItemsView({ collection: itemsCollection });
$(document.body).append(itemsView.render().el);
runBackbone.innerHTML = (new Date() - date) + " ms";
});
});
<div class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>Performance Backbone:</h3>
</div>
<div class="col-md-5 text-right time" id="run-backbone">Run</div>
</div>
<div id="backbone">
<div class="row">
<div class="col-md-12 test-data" id="col-12">
<!--HERE!!!!-->
</div>
</div>
</div>
</div>
我决定删除这一行:el : $('#col-12'),
并修改此行:$(document.body).append(itemsView.render().el);
到 $("#col-12").append(itemsView.render().el);
我在使用 Backbone/Underscore 模板时遇到了一些问题,因为我是网络开发的新手。
我读了这篇文章:
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout 我发现它真的很有趣,所以我试图编写相同的程序,但在 backbone.
我想用 id=col-12 将列表插入到 div 中,但 backbone 似乎无法做到这一点。对于我的错误,我深表歉意,但我以前从未在 Javascript 或 Html 中编程过,我确信我脑子里有一些困惑,你可以帮助我理解。 这是我的代码的一部分:
<script id="itemTemplate" type="text/template">
<%= name %>
</script>
$( document ).ready(function() {
// Model
var Item = Backbone.Model.extend({
});
// Collection
var ItemsCollection = Backbone.Collection.extend({
model: Item
});
// View for all elements
var ItemsView = Backbone.View.extend({
tagName : 'div',
el : $('#col-12'),
render: function() {
this.collection.each(function(item) {
var itemView = new ItemView({ model: item });
this.$el.append(itemView.render().el);
}, this);
return this;
}
});
// View for a single element
var ItemView = Backbone.View.extend({
tagName : 'span',
template: _.template($('#itemTemplate').html() ),
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
return this;
}
});
var runBackbone = document.getElementById("run-backbone");
runBackbone.addEventListener("click", function() {
var data = _buildData();
date = new Date();
// It creates the collection
var itemsCollection = new ItemsCollection;
for (var i = 0; i < data.length; i++)
{
newItem = new Item ({name: data[i].label});
itemsCollection.add(newItem);
}
var itemsView = new ItemsView({ collection: itemsCollection });
$(document.body).append(itemsView.render().el);
runBackbone.innerHTML = (new Date() - date) + " ms";
});
});
<div class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>Performance Backbone:</h3>
</div>
<div class="col-md-5 text-right time" id="run-backbone">Run</div>
</div>
<div id="backbone">
<div class="row">
<div class="col-md-12 test-data" id="col-12">
<!--HERE!!!!-->
</div>
</div>
</div>
</div>
我决定删除这一行:el : $('#col-12'),
并修改此行:$(document.body).append(itemsView.render().el);
到 $("#col-12").append(itemsView.render().el);