Question

以下是我的Backbone应用程序中发生的事情的基本概述：

路由器创建一个新的Profile视图并传入用户名。
初始化新配置文件时，它会使用传入的用户名创建一个新用户。
然后，个人资料会提取有关此用户的详细信息。
这是我迷路的地方......

这是我的问题：

我是按照预期的方式使用Backbone，还是应该重新考虑结构？
配置文件视图有一个使用Handlebars的render功能。我需要能够将用户详细信息传递给Handlebars以呈现视图。最好的方法是什么？
我应该在哪里实际调用render函数？

这是我的代码（注意评论问题）：

路由器

var Router = Backbone.Router.extend({
  routes: {
    ":username": "profile"
  },
  profile: function (username) {
    var profile = new Profile({username: username});
  }
});

模型

var User = Backbone.Model.extend({
  urlRoot: 'http://api.example.com/user'
});

查看

var Profile = Backbone.View.extend({
  el: "#content section",
  initialize: function(username) {
    var user = new User({id: this.options.username});
    user.fetch({
      beforeSend: authenticate,
      success: function() {
        //*************************************************************
        // How do I make this result available to the render function?
        //*************************************************************
      },
    });
  },
  render: function() {
    alert(JSON.stringify(this.context));
    var source = $("#profile").html();
    var template = Handlebars.compile(source);
    //**********************************************************************
    // How do I set context equal to the result of the initialize function?
    //**********************************************************************
    var html = template(context);
    $("#content section").html(html);
  }
});

Answer 1

我是按照预期的方式使用Backbone，还是应该重新考虑结构？

配置文件视图有一个使用Handlebars的render功能。我需要能够将用户详细信息传递给Handlebars以便   渲染视图。最好的方法是什么？

我应该在哪里实际调用render函数？

Rayweb已经回答了2，所以我会回答1（和3，但不太重要）。

问题1：是的，你做错了。为什么？您正在视图中创建模型，并且您没有将模型链接到视图，这违背了Backbone的目的，Backbone是一个MV *框架，而不仅仅是OOP工具。您应该创建模型，然后将其作为参数传递给视图，这样您就可以在不同视图中共享有关一个模型的信息。

var model = new Model();
var view = new View({model:model});
var view2 = new View2({model:model});

这样你就能用this.model.fetch（）来更新模型，它可以在每个视图中作为this.model访问，并带有更新的数据（如Rayweb在他的代码中所示）。

关于3，只要你想刷新视图就调用渲染，没有真正的规则。

Answer 2

将您的用户附加到视图中，如下所示：

var Profile = Backbone.View.extend({
   el: "#content section",
   initialize: function(username) {
       self = this; 
       this.user = new User({id: this.options.username});
       this.user.fetch({
           beforeSend: authenticate,
           success: function() {
                self.render(); // as this.user is attached to the view, once its
                               // fetched it will be available to your render function
                               // just by using ..this.user.
           },
       });
  },
  render: function() {
     alert(JSON.stringify(this.user));
     var source = $("#profile").html();
     var template = Handlebars.compile(source);

     var html = template(this.user);
     $("#content section").html(html);
  }
 });

使用Handlebars的Backbone应用程序的一般结构

2 个答案: