Question

我目前正在开发一个搜索栏，其中列出了三种类型的对象：用户，记录和位置。每个都有自己的模型，并定义了相应的控制器。我需要做的是检查它是哪种类型的对象，因为我需要与它呈现不同的HTML。

{{#each mainUserSearchResults}}
              {{#link-to 'user' this.userID}}

                <div class="row mainListSeperator" {{action "getapplicantUserID" this target="view"}}>
                  <img class="applicantsIcon" src="">
                  <div class="applicantsName">
                    {{unbound this.firstName}}&nbsp;{{unbound this.lastName}}
                  </div>
                  <div class="applicantsTitle">
                    User
                  </div>
                </div>

              {{/link-to}}
            {{/each}}

我遇到的唯一问题是我需要它来打印this.firstName＆amp; this.lastName如果是用户，但我不能对记录这样做。对于记录，我必须以与我执行this.firstName相同的方式呈现另一个属性 - this.recordID。这样做的方法是if条件，但我在HandleBars中找不到任何东西，它允许我检查来自mainUserSearchResults的数据是用户还是记录。

mainUserSearchResults是我的控制器中的一个属性，它返回一个对象数组：当前它返回一个用户对象和记录对象的连接数组。

Answer 1

假设有一些方法可以轻松区分2种类型的对象，您可以使用if语句并渲染不同的模板（甚至使用不同的部分，http://emberjs.com/guides/templates/rendering-with-helpers/）

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

    {{#if item.foo}}
      {{render 'foo' item}}
    {{/if}}

    {{#if item.cow}}
      {{render 'cow' item}}
    {{/if}}
    </li>

    {{/each}}
    </ul>
  </script>


  <script type="text/x-handlebars" data-template-name="foo">
    I'm a foo: {{foo}}
  </script>

  <script type="text/x-handlebars" data-template-name="cow">
    I'm a cow: {{cow}}
  </script>

http://emberjs.jsbin.com/qinilege/1/edit

或者，如果您需要更高级的检查，您可以使用项目控制器并在其中添加逻辑

{{#each item in model itemController='checker'}}
  <li>

  {{#if item.isFooBar}}
    {{render 'foo' item.model}}
  {{/if}}

  {{#if item.isFooBaz}}
    {{render 'fooz' item.model}}
  {{/if}}


  {{#if item.isCow}}
    {{render 'cow' item.model}}
  {{/if}}
  </li>
{{/each}}


App.CheckerController = Em.ObjectController.extend({
  isFooBar: Ember.computed.equal('foo', 'bar'),
  isCow: Ember.computed.notEmpty('cow'),
  isFooBaz: Ember.computed.equal('foo', 'baz')
});

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

Answer 2

Handlebars是一个无逻辑模板，因此您无法执行计算，例如类型检查。 There are some pretty good reasons for this。如果是我，我会把这个责任推到别处，可能一直到你的模型，原因有两个：

您在DOM中添加的任何条件都是 SLOW 。当您使用慢速设备（最值得注意的是移动设备）时，问题才会变得复杂。
每次添加新的可搜索内容时，您都必须更新模板。随着时间的推移，你最终会得到：
```
{{#if ...}}
  ...
{{/if}}

{{#if ...}}
  ...
{{/if}}

{{#if ...}}
  ...
{{/if}}

{{#if ...}}
  ...
{{/if}}
```

代替参加。例如，在您的用户模型中，添加

formattedName: (function() {
  return [this.get('firstName'), this.get('lastName')].join(' ');
}).property('firstName', 'lastName')

对您的记录和位置执行相同的操作。

然后，从

{{unbound this.firstName}}&nbsp;{{unbound this.lastName}}

到

{{unbound this.formattedName}}

现在，如果您在搜索中添加新类型，那么您将拥有一个完全通用的解决方案，只需要该模型来实现formattedName属性。

有些人会说我的建议很糟糕，因为它将模型的业务逻辑责任与显示逻辑混合在一起。在这种情况下，我猜测你在多个地方展示{{firstName}} {{lastName}}，所以我认为保持代码DRY的好处超过了将其转移到例如控制器上。你的电话。

如何检查Handlebars中的对象类型？

2 个答案: