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服务。该网址 /为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

这个问题似乎是，该视图呈现本身之前的模式是从服务器获取。这是为什么？

昨天，我跟着从窥视code中的前两个截屏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屋！