我正在尝试创建一个小的backbone.js应用程序,但是对事物的顺序很难.
<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应用程序提供服务. url / mymodel提供静态json文件：
{
"title": "My Model",}
加载应用程序时,我在javascript控制台中收到错误：
Uncaught ReferenceError: title is not defined
问题似乎是,视图在从服务器获取模型之前呈现自身.这是为什么？
昨天,我关注了PeepCode的前两个backbone.js截屏视频.我试图将我的应用程序与截屏视频中的应用程序进行比较,但是看不出我的应用程序为什么需要工作的原因.
有什么建议？
解决方法
在这种情况下,您应该引导模型数据,以便在页面加载时可用.
代替
window.model.fetch();
把这样的东西放进去(如果使用.erb)
<script>
window.model = new MyModel(<%= @model.to_json %>);
</script>
否则,您需要在获取模型后呈现视图,例如
绑定视图以在模型更改时进行渲染
initialize: function () {
_.bindAll(this,'render');
this.model.on("change",this.render);
},
或处理model.fetch的成功并呈现视图
window.model.fetch({
success: function (model,response) {
window.MyApp.myModelView.render();
}
});
