0

这是我的 Backbone 应用程序中发生的事情的基本概述:

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

这些是我的问题:

  1. 我是按照预期的方式使用 Backbone,还是应该重新考虑结构?
  2. Profile 视图具有render使用 Handlebars 的功能。我需要能够将用户详细信息传递给 Handlebars 以呈现视图。最好的方法是什么?
  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);
  }
});
4

2 回答 2

2
  1. 我是按照预期的方式使用 Backbone,还是应该重新考虑结构?
  2. Profile 视图具有render使用 Handlebars 的功能。我需要能够将用户详细信息传递给 Handlebars 以呈现视图。最好的方法是什么?
  3. 我应该在哪里实际调用该render函数?

Rayweb 已经回答了 2,所以我会回答 1(和 3,但它不太重要)。

问题1:是的,你做错了。为什么?您在视图中创建模型,并且没有将模型链接到视图,这违背了 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,只要你想刷新视图就调用 render ,没有真正的规则。

于 2013-06-05T21:47:08.757 回答
1

将您的用户附加到视图,如下所示:

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);
  }
 });
于 2013-06-05T18:18:09.040 回答