我正在尝试制作一个小型的backbone.js 应用程序,但在处理事情的顺序方面遇到了困难。
在我的 html 文件中,标题中有两个脚本块:
<script type="text/template" id="model-template">
<a href="#"><%= title %></a>
</script>
<script type="text/javascript">
jQuery(function(){
window.model.fetch();
});
</script>
在我的 app.js 中,我定义了一个简单的模型、视图和路由器。
(function($) {
window.MyModel = Backbone.Model.extend({
url: '/mymodel'
});
window.mymodel = new MyModel();
$(document).ready(function() {
window.MyModelView = Backbone.View.extend({
template: _.template($('#mymodel-template').html()),
initialize: function () {
_.bindAll(this, 'render');
},
render: function () {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
});
window.MyApp = Backbone.Router.extend({
routes: {
'': 'home'
},
initialize: function () {
this.myModelView = new MyModelView({
model: window.mymodel
});
},
home: function() {
var $body = $('body');
$body.empty();
$body.append(this.myModelView.render().el);
}
});
$(function() {
window.App = new MyApp();
Backbone.history.start({pushState: true});
});
})(jQuery);
该应用程序由一个简单的 sinatra 应用程序提供服务。网址/mymodel
提供静态 json 文件:
{
"title": "My Model",
}
加载应用程序时,我在 JavaScript 控制台中收到错误:
Uncaught ReferenceError: title is not defined
问题似乎是,视图在从服务器获取模型之前呈现自身。这是为什么?
昨天,我关注了 PeepCode 的前两个backbone.js 截屏视频。我试图将我的应用程序与截屏视频中的应用程序进行比较,但看不出我的应用程序想要工作的原因。
有什么建议么?