我刚开始使用 Backbone,我的目标是一个简单的幻灯片应用程序。我有一个 REST 接口,其中
/slidecasts
给我一份所有可用演示文稿的列表。返回的 json 如下所示:
[
{
"name": "p75-barth.pdf",
"nr": 1,
"slideLinks": [
"slides/0",
"slides/1",
]
}]
如果我想访问单个演示文稿并获取例如第一张幻灯片,我可以简单地执行以下操作:
slidecasts/1/slides
返回:
[
{
"content": null,
"imageLinks": [
"images/1"
],
"nr": 0,
"title": null
}
]
我想将演示文稿和幻灯片表示为骨干模型。我还想要一个 Backbone 视图,它最后只显示幻灯片图像、标题、一些注释和一个前进/后退按钮。
到目前为止,这是我的代码:
$(function (){
initModel();
initCollection();
initView();
var testSlidecast = new Slidecast();
testSlidecast.id=1;
testSlide = new Slide();
testSlide.id = 5;
testSlidecast.Slide = testSlide;
var slideView = new SlideView(({model: testSlidecast}));
})
function initView(){
SlideView = Backbone.View.extend({
el: $("#presentation"),
initialize: function(){
this.render();
alert("asd")
},
render: function(){
var variables = { presentation_name: "This is a Test-Slide-Name" };
var template = _.template( $("#slide_template").html(), {} );
this.el.html( template );
}
});
}
function initModel(){
Slide = Backbone.Model.extend({
});
}
function initCollection(){
Slidecast = Backbone.Collection.extend({
model: Slide,
url: function(){
return 'slidecasts/' + this.id + '/slides'
}
});
}
这适用于集合,但我真的不知道如何从那里获取单个幻灯片的信息。像 slidecast.slide("0") 这样的东西可能吗?
对于我的观点,我也有一些关于模板的问题:
我的 html 看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="style.css" rel="stylesheet"/>
<script src="http://underscorejs.org/underscore-min.js" > </script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" > </script>
<script src="http://backbonejs.org/backbone-min.js" > </script>
<script src="bscript.js" > </script>
</head>
<body>
<div id="presentation"> </div>
<script type="text/template" id="slide_template">
<label>Presentation <%= presentation_name %> </label>
<img src="" id="slide_pic" />
<input type="text" id="slide_content" value="asd" />
</script>
</body>
</html>
尽管我已经在视图中定义了变量,但我一直收到错误消息,即未定义要传递给模板 *presentation_name* 的变量名。