Question

在我的Ember模板中，我希望能够遍历来自模型（数组）的每个项目，如果值为“蓝色”，则在值旁边显示一些文本。

我的模板如下所示：

<script type="text/x-handlebars" data-template-name="index">
    <h2>Loop over colors</h2>
    <ul>
        {{#each color in model}}
            <li>{{color}} {{#if isBlue}} - Its Blue!{{/if}}  </li>
        {{/each}}
    </ul>
</script>

我的app.js文件如下所示：

App = Ember.Application.create({});

App.Router.map( function() {

    this.resource( 'about');

});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.IndexController = Ember.ArrayController.extend({
    isBlue: function() {
        return this.get('content') == 'blue';
    }.property()
});

我正在使用 this.get（'content'），因为我认为这应该是对实际模型数据的引用。

我尝试了很多代码变体，但现在我已经被阻止了。希望有人可以提供帮助。

Answer 1

ArrayController表示content属性是一个数组，而不仅仅是一个对象。此外，您不想直接访问content。控制器代理他们的模型，因此使用控制器就好像它是一个数组。所以你的isBlue函数在某些方面是错误的。 可能可能使用isBlue属性做你想做的事情，但我会用这样的东西：

colorItems: Em.computed.map('@this', function(color) { return { color: color, isBlue: color === 'blue' }; })

然后，在您的模板中：

{{#each colorItems}} <li> {{color}} {{#if isBlue}} - It's Blue! {{/if}} </li> {{/each}}

Answer 2

您正在IndexController上定义isBlue属性，它是一个ArrayController，而不是内容中的每个项目。您可以指示{{each}}帮助程序对循环中的每个项目使用itemController。通过这样做，您可以定义原始对象中不存在的其他计算属性，并使它们在each循环中可用：

<script type="text/x-handlebars" data-template-name="index">
    <h2>Loop over colors</h2>
    <ul>
        {{#each color in model itemController="color"}}
            <li>{{color}} {{#if isBlue}} - Its Blue!{{/if}}</li>
        {{/each}}
    </ul>
</script>

App.ColorController = Ember.ObjectController.extend({
  isBlue: function() {
    return this.get('content') === 'blue';
  }.property('content')
});

您还可以查看JSBIN。

在Ember中使用compute属性来获取模型数据并显示额外的文本

2 个答案: