Question

我仍然对Ember很新，并试图绕过它。我要做的是将我的模型返回到索引视图，其中包含5个数组条目。我希望我的索引视图取第一个，呈现一个单独的特色视图，然后取剩下的四个并将它们渲染为列表。但是，我和{{#if @first}}...{{/if}}没有任何运气，就像我读过的那样。这是我目前的代码：

的index.html

<script type="text/x-handlebars" data-template-name="index">
     {{#each model as |movie|}}
        {{component (if @first 'featured' 'preview') movie=movie}}
     {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="preview">
    <article class="featured">
        <div class="img">
            <img src="lib/img/feature/{{movie.full}}" alt="{{movie.title}}">
        </div>
        <div class="content">
            <h2>{{movie.title}}</h2>
            <p>{{{movie.preview}}}</p>
        </div>
    </article>
</script>

<script type="text/x-handlebars" data-template-name="featured">
    <article class="featured">
        <div class="img">
            <img src="lib/img/feature/{{movie.full}}" alt="{{movie.title}}">
        </div>
        <div class="content">
            <h2>{{movie.title}}</h2>
            <p>{{{movie.preview}}}</p>
        </div>
    </article>
</script>

Routes.js

var projects = [];
App.IndexRoute = Ember.Route.extend({
        model: function(params) {
            var url = 'lib/js/data/data.json';

            return Ember.$.getJSON(url).then(function(data) {
                projects = data;

                return projects.reverse();
            });
        }
    });

Answer 1

1）你应该创建用于显示项目的组件（两个组件）

2）使用component关键字并传递组件名称取决于每个循环内的索引（Read more at api page）

  {{#each model as |movie|}}
        {{component (if @first 'component-to-display-first-item' 'component-to-display-item') movie=movie}}
   {{/each}}

您需要的所有内容 - 创建两个组件（或单个组件并传递一些将切换模板的参数）

Answer 2

您可以使用以下代码分隔movie-box组件：

{{#if isFeatured}}
  <section class="featured-section">
    <div class="content-container">
      <article class="featured">
        <div class="img">
          <img src="lib/img/feature/{{movie.full}}" alt="{{movie.title}}">
        </div>

        <div class="content">
          <h2>{{movie.title}}</h2>
          <p>{{{movie.preview}}}</p>
        </div>
      </article>
    </div>
  </section>
{{else}}
<article>
  <div class="img">
    <img src="lib/img/preview/{{movie.thumb}}" alt="{{movie.title}}">
  </div>

  <div class="content">
    <h2>{{movie.title}} ({{movie.year}})</h2>
    <p>{{{movie.preview}}}</p>
  </div>
</article>
{{/if}}

...然后，您可以像这样调用它：

{{#each model as |movie index|}}
  {{movie-box
    movie=movie
    index=index}}
{{/each}}

您在此处将索引传递到movie-box组件，而movie-box组件使用标记isFeatured来显示正确的内容，因此我们应该创建一个计算movie-box组件的Javascript属性。像这样：

App.MovieBox = Ember.Component.extend({
  isFeatured: Ember.computed.equal('index', 1)
});

在这种情况下，只有当您传入的索引为1时，isFeatured才会返回true，因此它将以正确的方式运行。

-

你可以learn more about computed properties here。此外，您应该（稍后）查看ember-cli：它使创建ember应用程序变得更加容易。

Ember渲染索引模型中第一项的不同视图

2 个答案: