Ember js:使用数据在一个页面上加载多个模板

时间:2015-05-05 13:01:17

标签: ember.js

我正在使用ember.js中的应用程序。我向你们所有人提出几个问题。首先让我们讨论一下我的应用点,然后讨论我面临的问题。

  1. 应用程序就像绘制一个类似于" auto cad"的计划。为此我正在使用d3.js库
  2. 出于绘图目的,我们有不同的部分,如火,水等。卫星所有这些部分都有不同的svg容器用于绘图。
  3. 在此之后,我有一个模块,可以通过三种方式将此部分通过电子邮件发送给特定的电子邮件ID

    3.1当前部分明智的电子邮件(意味着如果我们在火灾部分绘图然后如果我们发送电子邮件,则svg of fire部分将以pdf的形式发送)(完成)

    3.2一次所有部分都以PDF格式提供内容。 (这里我的实际问题开始了)

  4. 在这一点上,所有部分的电子邮件我都遇到问题,一次检索所有部分的svg' s。因为当前部分已经加载到视图中,带有数据的模板,但是如何使用其绘图数据获取所有部分模板(svg元素' s)。

    我创建了这样的路线

    emailPDF = Ember.Route.extend({
    
        setupController: function(controller, model)
        {
            alert("Controller setup");
            this.controllerFor('fire').set('model', model);
            this.controllerFor('gas').set('model', model);
        },
        renderTemplate: function() {
            this._super();
            this.render('fire', {           // the template to render
                into: 'emailPDF',       // the template to render into
                outlet: 'fire',              // the name of the outlet in that template
                controller: 'fire'        // the controller to use for the template
            });
            this.render('gas', {
                into: 'emailPDF',
                outlet: 'gas',
                controller: 'gas'
            });
        }
    });
    

    模板就像:

    <div id="fire_test">
        {{outlet 'fire'}}
    </div>
    <div id="gas_test">
        {{outlet 'gas'}}
    </div>
    

    然后我从这样的一个控制器转换这条路线:

    this.transitionToRoute('emailPDF');
    

    但是在allSections模板中,我得到了以前的模板,我已经在火灾和气体出口处打开,无法渲染火灾和气体模板。

    如果我做错了,请告诉我......

1 个答案:

答案 0 :(得分:4)

我相信你想要做的就是这样......你需要创建一条路线,比如HomeAndContact。在此路线中创建模板。这里有2个选项,使模板类似于:

{{outlet 'home'}}
{{outlet 'contact'}}

或者您也可以这样做:

{{render 'home'}}
{{render 'contact'}}

我建议不要使用第二个选项,因为它会被弃用/与Ember未来的做法不一致。

要做第一个选项,您需要在HomeAndContactRoute中添加一些这样的代码:

HomeAndContactRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('home').set('model', model);
    this.controllerFor('contact').set('model', model);
  },
  renderTemplate: function() {
    this.render('home', {           // the template to render
      into: 'homeAndContact',       // the template to render into
      outlet: 'home',              // the name of the outlet in that template
      controller: 'home'        // the controller to use for the template
    });
    this.render('contact', {
      into: 'homeAndContact',
      outlet: 'contact',
      controller: 'contact'
    });
  }
});

我希望这会有所帮助。