我是 backbone.js 的新手，也是前端工作的新手，还没有完全弄清楚生命周期是如何工作的。

我们有一个 Django 后端，它为我们提供了 html 模板，我们基本上只将其用作框架。所有逻辑都在 Backbone View 中处理。

我目前遇到的问题是，我正在尝试绘制图形，但绘图函数无法找到基于 id 的 View ，因为它在渲染函数期间不存在，但我不知道一种在稍后阶段实现这一目标的方法。

我尝试在页面完全加载并正常工作后在 Chrome 控制台中手动创建 View :

   var main = new MainView();
   main.showChart();

View :

   var ChartView = Backbone.View.extend({

     title: 'Chart',

     initialize: function() {

    // This assures that this refers to this exact view in each function
    // (except within asynchronous functions such as jquery each)
    _.bindAll(this);

    // Saving parameters given by parent
    this.index = this.options.index;

    // Retrieve the template from server
    var template = _.template(getTemplate('chart.html'));

    // Compile the template with given parameters
    var compiledTemplate = template({'title': this.title});

    // Set the compiled template to this instance's el-parameter
    this.$el.append(compiledTemplate);

    // Rendering the view
    this.render();
 },

   render: function() {

    var self = this;

    // Draw the graph when the page is ready
    $(function(){
        self.drawGraph('chart1', this.line1Data);
    });

    // Render function should always return the instance
    return this;
},

drawGraph : function(chartId, lineData) {

    Morris.Line({
          element: chartId,
          data: [
            {y: '2012', a: 100},
            {y: '2011', a: 75},
            {y: '2010', a: 50},
            {y: '2009', a: 75},
            {y: '2008', a: 50},
            {y: '2007', a: 75},
            {y: '2006', a: 100}
          ],
          xkey: 'y',
          ykeys: ['a'],
          labels: ['Series A']
    });
},

});

创建位置:

     var chartWidgetView = new WidgetView({'contentView': new ChartView()});
    this.initializeWidget(chartWidgetView);
    this.$el.append(chartWidgetView.el);

谁能给我解释一下:

1. Backbone 实际上如何处理 View 的创建？有哪些不同的阶段？
2. 我应该如何处理这种情况，例如html 模板中的元素将在我的代码的哪一点存在，以便我可以为其调用绘图函数？
3. 还是我的架构存在根本性缺陷？我是否应该尝试以完全不同的方式来做到这一点？

最佳答案

FWIW，我认为您走在正确的轨道上。但是正如您的问题所指出的，您只是有些事情出了问题。

严格来说，主干 View 中并没有太多的生命周期。当您实例化一个时，它会调用初始化。除此之外，由您决定 View 的生命周期是什么。什么时候渲染。渲染的 el 何时附加到 DOM，何时从 DOM 中移除，何时关闭和销毁。这完全取决于您希望如何使用 View 。

当然，您可以做一些事情并添加一些事情来使这个生命周期更容易理解。例如，有一些很棒的框架位于主干之上。我建议将 LayoutManager、Thorax、Chaplin 和我自己的 Marionette 作为起点。

不过，更重要的是，您所描述的插件很可能依赖于插件运行之前 DOM 中的 HTML 元素。这对于可视化插件很常见，因为它们经常需要捕获位置信息、css 信息、相关项的位置等。

您可以做一些非常简单的事情来促进这些类型的插件并使其正常工作。我在这里写了一些关于它的博客:http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/ - 希望这能帮助您走上正轨。

具体来说，您需要了解的是 onShow 方法的概念。这不是 Backbone 自己理解的方法。这是一个您必须添加到您的 View 和应用程序中的概念。但好消息是这很容易。只需将方法添加到您的 View ，然后在正确的时间调用它:

var AnotherView = Backbone.View.extend({
  onShow: function(){
    this.$el.layout({ appDefaultStyles: true});
  }
});


// instantiate the view
var view = new AnotherView();

// render it
view.render();

// attach it to the DOM
$("#someDiv").html(view.el);

// now that it has been attached to the DOM
// you can call your DOM-dependent plugins
view.onShow();

希望对您有所帮助。

关于javascript - Backbone.js View 在其创建期间的生命周期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11960455/