使用getJSON获取数据的模板中的条件

Question

我试图弄清楚如何做一些非常简单的事情：在模板中使用带有getJSON数据的条件。我需要根据JSON哈希上的type键显示信息。作为一个例子，我已经包含了一个HBS文件，其中包含了我想做的事情。什么是Ember Way™来实现这一目标？

公司路线：

// routes/company.js

import Ember from 'ember';

export default Ember.Route.extend({
    model: function(params) {
        return this.store.findRecord('company', params.company_slug);
    },
    setupController: function(controller, model) {
        this._super(controller, model);

        Ember.$.getJSON('/companies/%@/events.json'.fmt(model.get('slug'))).then(data => {
            controller.set('events', data);
        });
    }
});

公司展示模板以及我想做的事情的示例：

<ul class="test">
    <li>lol</li>
    {{#each events as |event|}}
        <li class="{{event.type}}">
            {{event.title}}

            {{!-- This code will obviously not work: --}}
            {{#if event.type == 'company_event'}}
               show company event stuff
            {{/if}}
            {{#if event.type == 'user_event'}}
               show user event stuff
            {{/if}}

        </li>
    {{/each}}
</ul>

JSON数据示例：

[
    {
        title: "test test test",
        type: "company_event",
        date: "2015-10-14T00:00:00.000+02:00"
    }
]

Answer 1

将event定义为Ember对象，以便您可以在其上定义计算属性：

var eventObject = Ember.Object.extend({
  isCompanyEvent: Ember.computed.equal('type', 'company_event')
});

在阅读事件时，构建Ember对象：

Ember.$.getJSON('/companies/%@/events.json'.fmt(model.get('slug'))) . 
  then(data => controller.set('events', data.map(event =>
    eventObject.create(event)));

然后

{{#if event.isCompanyEvent}}
     show company event stuff

Mustache和Handlebars的开发人员有一个明确的哲学观点，即他们广泛定义的业务逻辑不属于模板。他们的想法是“你准备数据，我把它抽出来”。他们的目标首先是保持模板简单易读，但更重要的是将业务规则保存在一个地方 - 最常见的是相当于控制器。例如，在这个视图中，type对象的event属性具有可能值"company_event"且具有某些特定语义的事实是各种业务逻辑，因此模板中的不属于，其作业是一些HTML。换句话说，这些开发人员希望避免这样一种情况，即对接口的每次更改都需要在 n 不同的地方更改 n 。当然，没有开发人员想要通过模板来寻找各种清单常量用于表示神奇事物的地方。这个问题更加相关，因为使用JS代码我们可以轻松地在模型，控制器或对象中添加逻辑，以检测和报告type等字段的无效值，这样更难，并且实践并不常见，程序员可以将这种错误检测逻辑添加到模板中;如果他们这样做，很难将错误输出指向任何有意义的地方。换句话说，模板不等同于assert。

这是一种非常冗长的说法，ember-truth-helpers之类的东西是一个可怕的想法。前进两步，后退一步。在人们开始使用模板分离逻辑和内容十多年后，逻辑正在秘密地回归到内容中，这些内容与新的Ember助手风格相似，允许像{{#if (eq这样的事情。

Answer 2

我能想到两个建议：

1。 http://emberobserver.com/addons/ember-truth-helpers

{{#if (eq event.type 'company_event')}}
  show company event stuff
{{/if}}

2.A。 {{component}}

您将拥有company_event和user_event组件（您需要将名称缩写为符合命名规则），并执行以下操作：

{{component event.type event}}

2.b中。将其包装在组件

中

组件的另一种可能性是将整个事物包装在一个组件中并使用计算属性：

{{#each events as |event|}}
  {{li-event event=event}}
{{/each}}

// components/li-event.js
export default Ember.Component.extend({
  tagName: "li",
  classNameBindings: ['event.type'],

  isCompanyEvent: Ember.computed.equal('event.type', 'company_event'),
  isUserEvent: Ember.computed.equal('event.type', 'user_event')
});

// templates/components/li-event.js
{{event.title}}

{{#if isCompanyEvent}}
  show company event stuff
{{/if}}
{{#if isUserEvent}}
  show user event stuff
{{/if}}

选择哪个选项留给读者练习;）