Ember Render Unterschiedliche Ansicht für das erste Objekt im Index Modell

Question

Ich bin immer noch ziemlich neu in Ember und versuche, meinen Kopf drum herum zu bekommen. Was ich versuche, ist, mein Modell in die Indexansicht zurückzugeben, die beispielsweise 5 Array-Einträge enthält. Ich möchte, dass meine Indexansicht die erste Ansicht verwendet, um eine separate Ansicht zu erstellen, und dann die verbleibenden vier zu übernehmen und sie als Liste darzustellen. Ich hatte jedoch kein Glück mit {{#if @first}}...{{/if}} wie ich gelesen habe. Hier ist mein Code zur Zeit:

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) Sie sollten Komponente zur Anzeige von Elementen erstellen (zwei Komponenten)

2) Verwenden Sie component Schlüsselwort und übergeben Komponentenname hängt von Index innerhalb jede Schleife (Read more at api page)

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

Alles, was Sie brauchen - zwei Komponenten erstellen (oder einzelne und einige param passieren die Vorlage schaltet)

Answer 2

Sie eine movie-box Komponente trennen konnte, mit diesem Code:

{{#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}} 

... und dann können Sie es wie so aufrufen:

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

Sie übergeben hier den Index an die movie-box Komponente, und die movie-box Komponente verwendet ein Flag isFeatured, um den richtigen Inhalt anzuzeigen, also sollten wir eine berechnete Eigenschaft auf dem movie-box-Javascript-Komponente erstellen. Etwas wie folgt aus:

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

In diesem Fall isFeatured kehrt true nur, wenn der Index, den Sie in 1 passieren, so wird es die richtige Art und Weise zu arbeiten.

-

Sie können learn more about computed properties here. Außerdem sollten Sie (später) auf ember-cli schauen: es macht das Erstellen von Glut-Apps viel einfacher.