带下划线模板的bone.js渲染
[英]Rendering in backbone.js with underscore templates
问题描述
我尝试使用下划线的模板呈现项目列表。 但是它什么也没显示。
我尝试创建2个视图，一个是任务，一个是任务列表，但是我一直坚持使用模板。
-
.render()什么作用？ - 如果我使用模板，是否还需要渲染？
我认为当您执行this.$el.html(template_var)时，数据将映射模板变量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>
1 个解决方案
解决方案1
2 已采纳 2016-10-24 00:27:23
您真的很亲密，但是有小问题。
骨干网做了很多事情，但对您却没有做的一件事就是渲染逻辑，它完全由开发人员决定。 因此，您需要：
- 一个将HTML与JS逻辑分开的模板。
- 一个
render函数，该函数使用您喜欢的技术（在本例中为jQuery）进行渲染。
即使尚未渲染，主视图也始终具有根DOM元素（ el ） ，如果未指定tagName则默认情况下为div 。
因此，您的任务视图在呈现时如下所示：
<div>
<li>Go to store</li>
<li>4</li>
</div>
我稍微修改了模板即可使用。
我将CSS移回了HEAD部分。 这是一个标准，但实际上不是问题之一。
模型中的defaults属性应在defaults属性中指定。
仅在ES6（ECMAScript 2015）中提供具有以下缩写形式的函数的定义。
render(){
从ECMAScript 2015（ES6）开始，引入了针对对象初始化程序的方法定义的较短语法。 这是分配给方法名称的函数的简写。
为了使其与大多数浏览器兼容 ，您应该使用：
render: function() {
您还忘记了在列表视图上调用render。
$('body').html(tasksView.el)
应该：
$('body').html(tasksView.render().el);
由于您的代码位于IIFE内 ，因此您无需使应用程序和函数与window成为全局变量，因此本地var就足够了，并且是更好的编码实践。
<!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>
在Underscore.js / Backbone.js模板中使用IF语句
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.