Question

为了解决这个问题，我简化了我的应用。我只是开始了解Ember，我还没有尽可能有效地完成工作，我相信。

我正在寻找一种方法来为具有某些特征的条目使用不同的模板。让我解释一下：

我有一个嵌套路线如下：

App.Router.map(function(){
    this.resource('products', function() {
        this.resource('product', { path: '/:product_id' });
    });
});

和这样的JSON文件：

{"product": [
    {
      "id": 1,
      "title": "Bicycle",
      "description": "A nice red bicycle that you can ride on.",
      "display": "textonly"
    },
    {
      "id": 2,
      "title": "Bus",
      "description": "A big bus that many people can ride on."
      "display": "bigblocks"
    },
    {
      "id": 3,
      "title": "Airplane",
      "description": "You can fly in this to get to your destination faster",
      "display": "textonly"
    }
  ]
}

如您所见，我在JSON中添加了一个属性，用于确定应如何显示产品条目。

现在，我的html模板如下所示：

<script type='text/x-handlebars' data-template-name='products'>
      <div class='row'>
        <div class='col-md-3'>
            <div class='list-group'>
                {{#each}}
                    {{#link-to 'product' this classNames='list-group-item'}}
                        {{title}}
                    {{/link-to}}
                {{/each}}
            </div>
        </div>
        <div class='col-sm-9'>
            {{outlet}}
        </div>
      </div>
</script>

<script type='text/x-handlebars' data-template-name='product'>
    <div class ='row'>
        <div class ='col-md-9'>
            <h4>{{title}}</h4>
            <p>{{description}}</p>
        </div>
     </div>
</script>

我的应用目前呈现如下：

enter image description here

现在，我想要做的是通过一个不同的模板（或视图或组件或任何最适合工作的）渲染一些产品，这样当"display": "bigblocks"产品的呈现略微不同于当"display": "textonly"喜欢这样的时候：

enter image description here

所以实际上，我希望有许多JSON条目，并根据JSON文件中的'display'值对它们进行不同的渲染。

我现在正在寻找一种非常简单的方法，可能是一个IF语句或类似的东西，这样我就可以了解如何做到这一点。

非常感谢，如果需要，请索取更多信息：）

Answer 1

组件允许您指定templateName。因此，您可以根据display属性的值计算模板名称，如下所示：

App.XDisplayComponent = Ember.Component.extend({
  tagName: "",
  templateName: function(){
    return this.get('item.display'); 
  }.property('item'),
});

您可以按如下方式使用该组件：

  <script type="text/x-handlebars" data-template-name="index">
    <ul>
      {{#each item in model}}
        <li>{{item.name}} {{ x-display item=item}} </li>
      {{/each}}
    </ul>
  </script>

查看有效的演示here

Answer 2

您可以使用控制器上的计算属性和模板中的条件逻辑来完成您想要的任务。

在产品控制器中包含以下计算属性：

isDisplayTextOnly: function(){
    return this.get('display') === 'textonly';
}.property('model.display')

向产品模板添加条件逻辑，以便根据控制器中计算的值以不同的格式显示：

{{#if isDisplayTextOnly}}
    <!-- What you want displayed when  "display" == "textonly" -->
{{else}}
    <!-- What you want displayed when  "display" == "bigblocks" or anything else -->
{{/if}}

Ember - 根据数组中的值通过不同的模板渲染产品

2 个答案: