Backbone.js 视图在模型获取之前呈现 [英] backbone.js view renders before model fetch
问题描述
我正在尝试制作一个小型的backbone.js 应用程序,但在处理顺序上有困难.
I'm trying to make a small backbone.js app, but struggle with the order of things.
在我的 html 文件中,标题中有两个脚本块:
In my html file, I have two script blocks in the header:
<script type="text/template" id="model-template">
<a href="#"><%= title %></a>
</script>
<script type="text/javascript">
jQuery(function(){
window.model.fetch();
});
</script>
在我的 app.js 中,我定义了一个简单的模型、视图和一个路由器.
In my app.js, I have defined a simple model, view and a router.
(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 文件:
The application is served by a simple sinatra application. The url /mymodel
serves a static json file:
{
"title": "My Model",
}
加载应用程序时,我在 javascript 控制台中收到错误消息:
When loading the application, I get an error in the javascript console:
Uncaught ReferenceError: title is not defined
问题似乎是,视图在从服务器获取模型之前呈现自身.为什么会这样?
昨天,我关注了 PeepCode 的前两个backbone.js 截屏视频.我试图将我的应用程序与截屏视频中的应用程序进行比较,但找不到我的应用程序需要工作的原因.
Yesterday, I followed the first two backbone.js screencasts from PeepCode. I have tried to compare my application with the one that came out of the screencasts, but cant't see a reason for why my application want work.
有什么建议吗?
推荐答案
在这种情况下,您应该引导您的模型数据,以便在页面加载时可用.
In this case you should bootstrap your model data so that it's available on page load.
代替
window.model.fetch();
把这样的东西放进去(如果使用 .erb)
put something like this in (if using a .erb)
<script>
window.model = new MyModel(<%= @model.to_json %>);
</script>
否则您需要在获取模型后渲染视图,例如
Otherwise you need to render the view once the model is fetched e.g.
当模型改变时绑定视图渲染
bind the view to render when the model changes
initialize: function () {
_.bindAll(this, 'render');
this.model.on("change", this.render);
},
或者处理model.fetch成功并渲染视图
or handle the success of the model.fetch and render the view
window.model.fetch({
success: function (model, response) {
window.MyApp.myModelView.render();
}
});
这篇关于Backbone.js 视图在模型获取之前呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!