backbone.js视图在模型提取之前呈现

我正在尝试创建一个小的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应用程序提供服务. 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();
   }
});

原文地址：https://www.jb51.cc/js/156121.html