Question

如果我在列表中涉及两个组件：

ParseFacebookUtils.logInWithReadPermissionsInBackground(ConnectionActivity.this, permissions, new LogInCallback() {
my-list

但实际上我们说有两种类型的＆＃34;项目＆＃34;列表可能包含，所以还有另一个组件：

my-item

在运行时，我用以下内容实例化我的列表：

my-other-item

我希望我的{{my-list items=items type='my-other-item'}}组件能够对已选择的项目组件进行一些内省并做出适当的反应。在我的示例中，假设每个项目组件都有一个名为my-list的元属性，我想做类似的事情：

_aspects

其中＆＃39; type＆＃39;是项目组件的名称。有没有人以前解决过这个问题？

我已经收录了＆＃39; ember-cli＆＃39;标签以及＆＃39; ember＆＃39;只是因为我的问题可能与不完全理解CLI的解析器
有关

Answer 1

您可以使用Ember 1.11中引入的组件帮助程序，它允许您根据绑定值决定应该呈现哪个组件：http://emberjs.com/blog/2015/03/27/ember-1-11-0-released.html#toc_component-helper

这是一篇关于这个主题的文章。底部附近的选项C是您正在寻找的：
http://spin.atomicobject.com/2015/03/26/emberjs-dynamically-render-components/

<强> Working JSBin Demo

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <script type='text/x-handlebars'>
    {{my-list model=model}}  
  </script>

  <script type='text/x-handlebars'
          data-template-name='components/my-list'>

    <ul>
      {{#each model as |item|}}
        {{component item.componentType tag='li' item=item}}
      {{/each}}
    </ul>

  </script>

  <script type='text/x-handlebars'
          data-template-name='components/my-item-type1'>
    <b style='color:green'>{{item.componentType}}</b><br>
    ({{item.description}})
  </script>

    <script type='text/x-handlebars'
          data-template-name='components/my-item-type2'>
    <i style='color:orange'>{{item.componentType}}</i><br>
    ({{item.description}})
  </script>

</body>
</html>

使用Javascript：

var fixtureData = [
  {
    name: 'Item 1',
    componentType: 'my-item-type1',
    description: 'Should be rendered with component type1'
  },{
    name: 'Item 2',
    componentType: 'my-item-type2',
    description: 'Should be rendered with component type2'
  }
];

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return fixtureData;
  }
});

在Ember中反思儿童成分

1 个答案: