Question

我试图使用ember.js创建一些非常简单的东西，并且我在旧示例，新示例和大量文档之间得到了很大的损失。

我想创建一个没有功能的应用程序，只需在两列中显示两组数据。真正的应用程序使用来自两个不同来源的JSON数据并且更复杂，但问题减少到使下面的工作：

<div id="appholder">
 <script type="text/x-handlebars">
  {{outlet left}}
  {{outlet right}}
 </script>
 <script type="text/x-handlebars" data-template-name="left">
  <div id="left">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  </div>
 </script>
 <script type="text/x-handlebars" data-template-name="right">
  <div id="right">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  </div>
 </script>
</div>

和javascript之类的东西

App = Ember.Application.create({
  rootElement: '#appholder'
});

App.LeftController = Ember.ArrayController.extend({
  model: function() {
    return ['left one', 'left two'];
  } 
});
App.RightController = Ember.ArrayController.extend({
  model: function() {
    return ['right one', 'right two'];
  } 
});

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function() {
      this.render('left', {
        outlet: 'left',
        controller: 'left',
      });
      this.render('right', {
        outlet: 'right',
        controller: 'right',
      });
    }
});

输出希望的结果，左列包含来自一个数据源的列表条目，右列包含来自另一列的两个条目。

理想情况下，有人可以提供上述适应工作代码的js小提琴吗？它的任何部分都可以更改，在模板中使用{{render}}或{{view}}以及js应该是什么。

感谢您的帮助

http://emberjs.jsbin.com/mifer/2/edit

Answer 1

Here is a working JSBin

首先，为了将函数用作属性，必须使用property()函数使其成为计算属性：

App.LeftController = Ember.ArrayController.extend({
  model: function() {
    return ['left one', 'left two'];
  }.property() 
});

其次，renderTemplate代码位置错误。您将其放在index路线中，但实际上它应该在application路线中。如果您的{{outlet}}模板中有application，则会将索引模板呈现在其中。然后，如果你在索引模板中有这两个命名的出口，你所拥有的几乎可以工作（如果你想要路由，你需要在this.render()使用时this._super()或renderTemplate要渲染的模板。

但是，您有两个指定的出口，您想要手动渲染到应用程序模板内部。因此：

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render();
    this.render('left', {outlet: 'left', into: 'application'});
    this.render('right', {outlet: 'right', into: 'application'});
  }
});

现在this next approach是我在仪表板应用程序中处理多个模型的方法。我经常需要替换小部件的部分，所以我使用多个命名插座。我重新构建了您的代码，以便应用程序模板将索引模板呈现到其单个未命名的插座中。

这种方法的关键：

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.RSVP.hash({
      left:  ['left one', 'left two'],
      right: ['right one', 'right two']
    });
  },
  renderTemplate: function(controller, model){
    this.render();
    this.render('left', {outlet: 'left', into: 'index', controller: 'left', model: model.left});
    this.render('right', {outlet: 'right', into: 'index', controller: 'right', model: model.right});
  }
});

每当您需要返回多个模型，并且希望在返回所有模型之前阻止路径，请使用Ember.RSVP.hash。您返回多个承诺，每个承诺都作为返回的model的属性。 RenderTemplate采用两个参数controller和model，因此您可以在renderTemplate中访问模型，以手动将模型传递到要渲染的模板的控制器中。

作为这种方法的轻微alternative，如果你需要在页面上渲染多个数据源，但你不需要动态替换支持其中一个模型的整个模板（即渲染一次并完成），您可以使用{{render}}帮助器。

 <script type="text/x-handlebars" data-template-name="index">
 <p>Index Template</p>
 {{render 'left' model.left}}
 {{render 'right' model.right}}
 </script>

此代码的好处是我们的route已经简化了。

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.RSVP.hash({
      left:  ['left one', 'left two'],
      right: ['right one', 'right two']
    });
  }
});

但是，我们已经失去了通过行动轻松渲染其他东西的能力，因为我们不再有命名出口。

ember.js中有两个数据源和两个出口

1 个答案: