15

我有一个控制器对象，就像：

MyApp.objController = Ember.ArrayController.create({
  init: function(data) {
    data.isValid = function() {
      return (data.validity === "valid");
    }
    this.pushObject(MyApp.MyObj.create(data));
  }
});

我的看法是这样的：

{{#each MyApp.objController}}
  {{#if isValid}}
   <some markup>
   {{else}}
   <some other markup>
  {{/if}}
{{/each}}

我假设ifHandlebars 中的条件同时接受值和函数，但事实并非如此。这真的可能吗，我只是做错了吗？

4

4 回答 4

9

Handlebars if 语句只比较一个值是否存在，是否为假值（即不存在、0、空字符串等）。您必须编写自定义辅助函数。

你可以这样做

Handlebars.registerHelper('isValid', function (value, options) {
    if (value == "valid") {
        return options.fn(this);
    }
    return options.inverse(this);
});

这注册了一个块助手。如果您传入的值评估为“有效”，它会返回带有当前数据的助手后面的模板。如果它没有评估为有效，它会返回带有当前数据的 else 语句之后的模板。

然后在您的模板中，您可以像这样使用它

{{#each MyApp.objController}}
    {{#isValid validity}}
        <some markup>
    {{else}}
        <some other markup>
    {{/isValid}}
{{/each}}

否则，如果您想遵守 Handlebars 的精神并制作“无逻辑”模板，请在渲染模板之前设置一个标志，指示该数据是否有效，然后使用带有标志的 helper 的把手。

您还可以设置一个通用函数来处理这种情况和其他情况。有关通用 if 的示例，请参阅我在handlebars.js {{#if}} 条件中的逻辑运算符中的答案（类似于上述答案）

于 2012-08-15T00:05:49.053 回答
6

如果您将您定义isValid为 a property，则可以在语句中使用它if而无需创建自定义 Handlebars 助手，请参阅http://jsfiddle.net/pangratz666/Dq6ZY/：

车把：

<script type="text/x-handlebars" data-template-name="obj-template" >
    {{view Ember.TextField valueBinding="age" }}
    {{#if isValid}}
        Si Si.
    {{else}}
        Nope!
    {{/if}}
</script>​

JavaScript：

App.MyObj = Ember.Object.extend({
    isValid: function() {
        return this.get('age') >= 18;
    }.property('age')
});

Ember.View.create({
    templateName: 'obj-template',
    controller: App.MyObj.create({
        age: 21
    })
}).append();

​</p>

于 2012-08-15T06:30:25.543 回答
-1

您可以创建一个自定义 Handlebars 助手来执行此操作。

于 2012-08-01T20:06:29.483 回答
-3

试试这个：

<ul>
  {{#each subsites}}
    {{#if this}}
      <li>{{{WhatIsTheSiteFor this}}}</li>
    {{else}}
      <li>no found</li>
    {{/if}}
  {{/each}}
</ul>

辅助功能WhatIsTheSiteFor：

Handlebars.registerHelper('WhatIsTheSiteFor', function(siteName) {
  var subSiteName = '',
      siteNameStr = '';

  $.each(siteName, function(i, item) {
    siteNameStr += item;
    return siteNameStr;
  });

  if(siteNameStr === 's.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">GB搜索引擎</a>';
  }
  else if (siteNameStr === 'm.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">GB手机阅读</a>';
  }
  else if (siteNameStr === 'rss.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">RSS消息订阅</a>';
  }

  return subSiteName;
});

可以在此处找到演示：http ://www.gbin1.com/gb/networks/uploads/71bb1c1e-0cd3-4990-a177-35ce2612ce81/demo6.html

于 2013-01-03T06:42:11.057 回答