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

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>

我的应用目前呈现如下：

现在，我想做的是通过不同的模板（或视图或组件或任何最适合该工作的东西）渲染一些产品，以便 "display": "bigblocks" 渲染的产品略有不同比 "display": "textonly" 像这样：

所以实际上，我想要很多 JSON 条目，并根据它们在 JSON 文件中的 'display' 值以不同方式呈现它们。

我现在只是在寻找一种非常简单的方法来执行此操作，也许是 IF 语句或类似的东西，这样我就可以了解如何完成此操作。

非常感谢，如果需要，请询问更多信息:)

Answer 1

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

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

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}}

Answer 2

组件允许您指定 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

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

Ember - Render products through different templates based on a value in the array

json

handlebars.js

ember.js