javascript - Ember 和 Handlebars 迭代集合数组

Question

我正在学习 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>

现在是我的 Controller :

    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

Answer 1

您的每个语法无效。您必须使用新语法:

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

See working demo on CodePen.