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

Question

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

1. 路由器创建一个新的配置文件 View 并传入用户名。
2. 初始化新配置文件时，它会使用传入的用户名创建一个新用户。
3. 然后，个人资料会获取有关该用户的详细信息。
4. 这就是我迷路的地方......

这些是我的问题:

1. 我是否按照 Backbone 的预期用途使用它，或者我应该重新考虑其结构？
2. 配置文件 View 有一个使用 Handlebars 的render 函数。我需要能够将用户详细信息传递给 Handlebars 才能渲染 View 。最好的方法是什么？
3. 我应该在哪里实际调用 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

1. Am I using Backbone in the way that it was intended to be used, or should I re-think the structure?
2. The Profile view has a render function which uses Handlebars. I need to be able to pass the user details to Handlebars in order to render the view. What's the best way to do this?
3. Where should I actually call the render function?

Rayweb 已经回答了 2 个，所以我将回答 1(和 3，但不太重要)。

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

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

这样，您就可以使用 this.model.fetch() 更新模型，并且可以在每个 View 中以 this.model 的形式访问更新后的数据(如 Rayweb 在其代码中所示)。

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