0
アンダースコアテンプレートを使用してアイテムのリストをレンダリングしようとしています。しかし、それは何も表示しません。backbone.jsでのアンダースコアテンプレートによるレンダリング
私は2つのビューを作成しようとしました.1つはタスクであり、もう1つはタスクリストですが、私はテンプレートを使用することに固執しています。
.render()とは何ですか？- テンプレートを使用しても、レンダリングする必要がありますか？
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>
'$（ '体'）HTML。（tasksView.render（）エル。）;'なぜ私はまだここに再びレンダリングコールする必要がありますか？私はすでにレンダリングメソッドの最後に 'return this'を使用していませんか？ – Sandy
@Sandy 'return this'は連鎖呼び出しのためのものです。 'render'はどこでも呼び出されないので、その行を呼び出す必要があります。 –
私は '$（ 'body'）html（tasksView.el）;のようなレンダリングのようなものを見たことがありませんでしたが、忘れました – Sandy