带下划线模板的belly.js渲染 [英] Rendering in backbone.js with underscore templates
问题描述
我尝试使用下划线的模板呈现项目列表.但是它什么也没显示.
I try to render a list of item using underscore's template. But it displays nothing.
我尝试创建2个视图，一个是任务，一个是任务列表，但是我一直坚持使用模板.
I tried to create 2 views, one is a task and one is a task list, but I'm stuck at using template.
-
.render()的作用是什么? - 如果我使用模板，是否还需要渲染?
- What does
.render()do? - if I use template, do I still need to render?
我认为执行this.$el.html(template_var)时数据会映射模板变量?
I thought the data will map the template variable when you do this.$el.html(template_var)?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/template" id="task_list">
<li><%=title%></li>
<li><%=priority%></li>
</script>
</script>
<script type="text/javascript">
(function(){
window.App = {
Models:{},
Collections:{},
Views:{}
};
window.template = function(id){
return _.template( $('#' + id).html() );
}
App.Models.Task = Backbone.Model.extend({
title: 'default',
priority: 1
});
App.Collections.Task = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Task = Backbone.View.extend({
template: template('task_list'),
render(){
var template = this.template( this.model.toJSON() );
console.log(template)
this.$el.html(template);
return this;
}
})
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function(){
this.collection.each( this.addOne, this);
return this;
},
addOne: function(task){
var taskView = new App.Views.Task({ model: task})
taskView.render();
this.$el.append(taskView.render().el);
}
})
var tasks = new App.Collections.Task([
{
title: 'Go to store',
priority: 4
},
{
title: 'Eat',
priority: 3
},
{
title: 'Sleep',
priority: 4
}
])
var tasksView = new App.Views.Tasks({collection: tasks})
$('body').html(tasksView.el)
})()
</script>
</body>
</html>
推荐答案
您真的很亲密，但是有一些小问题.
You were really close, but there were small problems.
Backbone可以做很多事情，但是对您没有帮助的一件事就是渲染逻辑，它完全由开发人员决定.因此，您需要:
Backbone does a lot of things, but one thing it doesn't do for you is the rendering logic, which is left completely up to the developer. So, you need:
- 用于将HTML与JS逻辑分开的模板.
- 一个
render函数，该函数使用您喜欢的技术(在我们的情况下为jQuery)进行渲染.
- a template to separate the HTML from the the JS logic.
- a
renderfunction which does the rendering using your favorite technique, jQuery in our case.
Backbone视图始终具有根DOM元素(el)，即使不是尚未渲染，如果未指定tagName，则默认为div.
A Backbone view always has a root DOM element (el) even if it was not rendered yet, which is a div by default if tagName isn't specified.
因此，您的任务视图在渲染时看起来像这样:
So your task view looked something like this when rendered:
<div>
<li>Go to store</li>
<li>4</li>
</div>
我稍微修改了模板以使其正常工作.
I changed the template a little to work.
我将CSS移回了HEAD部分.这是一个标准，但实际上不是问题之一.
I moved the CSS back to the HEAD section. This is a standard, but was not really one of the problem.
应在 defaults属性中指定模型中的默认属性.
Default attributes in a model should be specified in the defaults property.
使用简写语法定义函数如下所示仅在ES6(ECMAScript 2015)中可用.
Defining function with the shorthand syntax like the following is only available in ES6 (ECMAScript 2015).
render(){
从ECMAScript 2015(ES6)开始，引入了针对对象初始化程序的方法定义的较短语法.这是分配给方法名称的函数的简写.
Starting with ECMAScript 2015 (ES6), a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.
并使其与大多数浏览器兼容，您应该使用:
render: function() {
您还忘记了在列表视图中调用渲染.
You also forgot to call render on the list view.
$('body').html(tasksView.el)
应该是:
$('body').html(tasksView.render().el);
由于您的代码位于 IIFE 中，因此您无需创建自己的代码应用程序和功能与window全局通用，本地var就足够了，并且是更好的编码实践.
Since your code is inside an IIFE, you don't need to make your app and functions global with the window, a local var is enough and is a better coding practice.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CSS should be in the head -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/template" id="task_list">
<%=title%> (<%=priority%>)
</script>
<script type="text/javascript">
(function() {
var App = {
Models: {},
Collections: {},
Views: {}
};
function template(id) {
return _.template($('#' + id).html());
}
App.Models.Task = Backbone.Model.extend({
defaults: {
title: 'default',
priority: 1
}
});
App.Collections.Task = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Task = Backbone.View.extend({
template: template('task_list'),
tagName: 'li',
render: function() {
var template = this.template(this.model.toJSON());
console.log(template)
this.$el.html(template);
return this;
}
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.Task({
model: task
})
this.$el.append(taskView.render().el);
}
});
var tasks = new App.Collections.Task([{
title: 'Go to store',
priority: 4
}, {
title: 'Eat',
priority: 3
}, {
title: 'Sleep',
priority: 4
}]);
var tasksView = new App.Views.Tasks({
collection: tasks
});
$('body').html(tasksView.render().el);
})()
</script>
</body>
</html>
这篇关于带下划线模板的belly.js渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
