Ember 和 Handlebars 遍历集合数组

Question

我正在努力学习 Ember 并尝试用它做一些小想法。目前，我正在尝试接收文本字段输入以过滤列表和 return 匹配结果。我有所有这些工作，你知道，'hard' 东西。但是，不工作的部分是 Handlebars 读取我正在 returning 的阵列的 'title' 属性。它只是空白。

这是我的模板：

<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

Answer 1

您的 each 语法无效。您必须使用新语法：

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

See working demo on CodePen.

Ember 和 Handlebars 遍历集合数组

Ember and Handlebars Iterate Over a Set Array

javascript

arrays

handlebars.js

ember.js