如何从骨干收集获取数据模板 [英] How to fetch data from Backbone collection to Template
问题描述
我只是写一个简单的骨干项目。但我没有得到如何从骨干收集数据提取骨干模板。完成code被写入如下：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;骨干教程＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =用户＆gt;用户＆LT; / DIV＆GT;
＆LT; DIV CLASS =页＆GT;＆LT; / DIV＆GT; ＆LT;脚本类型=文/模板ID =用户列表模板＆GT;
我不能够获得daya.key数据
＆LT; H1＆GT; ＆所述;％= data.key％GT; ＆LT; / H1＆GT; ＆LT; / SCRIPT＆GT; ＆LT;脚本类型=文/ JavaScript的SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =underscore.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =Backbone.js的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
这是我收集code
VAR专辑= Backbone.Collection.extend（{ 网址：/data.json
}）;
这是我的看法code
VAR的UserList = Backbone.View.extend（{
EL：'页'，
模板：_模板（$（'＃用户列表模板）HTML（）），
渲染：功能（）{
VAR认为这=;
VAR专辑=新专辑（）;
album.fetch（{
成功：函数（专辑）{ VAR _data = {数据：album.models}; $（that.el）的.html（that.template（_data））;
}
}）
} }）;
这是我的路由器code
VAR路由器= Backbone.Router.extend（{
路线：{
：家//＃帮助
}
}）; VAR用户列表=新的UserList（）;
VAR路由器=新路由器（）; router.on（'路线：家，函数（）{
userList.render（）;
}）; Backbone.history.start（）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
和这里是data.json文件
{关键：值打印模板}
两处修改，我建议
1。首先检查数据费尔德在你的模板。既然你是从集合中获取数据将是模型数组。
＆LT; H1＆GT; ＆LT;％=数据[0] .KEY％GT; ＆LT; / H1＆GT;
或者您可以使用一个for循环遍历集合
2，data.json文件应该是这样的。
[{钥匙：值}]
i am just writing a simple backbone program. But i am not getting how to fetch data from backbone collection to backbone template. Complete code is written below:
<!doctype html>
<html>
<head>
<title>Backbone tutorial</title>
</head>
<body>
<div class="user">user</div>
<div class="page"></div>
<script type="text/template" id="user-list-template">
I am not able to get data on daya.key
<h1> <%= data.key %> </h1>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script>
This is my Collection code
var Album = Backbone.Collection.extend({
url : "/data.json"
});
This is my view code
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
render : function(){
var that=this;
var album= new Album();
album.fetch({
success:function(album){
var _data = {data : album.models} ;
$(that.el).html(that.template(_data));
}
})
}
});
This is my Router code
var Router = Backbone.Router.extend({
routes: {
"": "home" // #help
}
});
var userList= new UserList();
var router = new Router();
router.on('route:home', function(){
userList.render();
});
Backbone.history.start();
</script>
</body>
</html>
and here is the data.json file
{ "key" : "value to print on template "}
Two modifications i would suggest
1.First check the data feild in your template. Since you are fetching data from the collection it will be array of models.
<h1> <%= data[0].key %> </h1>
or you can use a for loop iterating over the collections
2.The data.json file should look like this
[{"key" : "value"}]
这篇关于如何从骨干收集获取数据模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
