Ember 和 Handlebars 迭代一个集合数组答案

【问题标题】：Ember and Handlebars Iterate Over a Set ArrayEmber 和 Handlebars 迭代一个集合数组
【发布时间】：2015-12-06 19:10:05
【问题描述】：

我正在努力学习 Ember，并尝试用它做一些小想法。目前，我正在尝试接收文本字段输入以过滤列表并返回匹配结果。我有所有这些工作，你知道的，“硬”的东西。但是，不起作用的部分是 Handlebars 读取我返回的数组的“标题”属性。它只是空白。

这是我的模板：

<script data-template-name="application" type="text/x-handlebars">
  {{input type="text" value=searchString placeholder="Search..."}}
  {{filterMovies}}
  <ul>
    {{#each searchResults}}
    <li>{{title}}</li>
    {{/each}}
  </ul>
</script>

现在是我的控制器：

    App.ApplicationController = Ember.Controller.extend({
    filterMovies: function() {
      var self = this,
        searchString = self.get('searchString'),
        searchResults = [],
        filterArrLength = null,
        theFullMovieList,
        theFilteredMovieList = [];

      if (!searchString) {
        return;
      }

      var url = 'http://www.json-generator.com/api/json/get/clVKyWQSnC';
      Ember.$.getJSON(url).then(function(data) {
        theFullMovieList = data;

        theFullMovieList.filter(function(movie) {
          if (movie.title.toLowerCase().startsWith(searchString)) {
            theFilteredMovieList.push(movie);
          }
        });
        console.log(theFilteredMovieList);
        self.set('searchResults', theFilteredMovieList);
      });
    }.property('searchString')
  });

我尝试使用{{this}}、{{this.title}}、{{searchResults.title}} 和{{title}} 进行打印，但没有成功。但是，记录数组会显示正确的值。

有什么想法吗？ View On CodePen

【问题讨论】：

标签： javascript arrays ember.js handlebars.js

【解决方案1】：

您的每个语法都无效。你必须使用新的语法：

<ul>
  {{#each searchResults as |movie|}}
    <li>{{movie.title}}</li>
  {{/each}}
</ul>

See working demo on CodePen.

【讨论】：

谢谢！这是完美的。