Ember : CollectionView의 컨텐츠로 모델

Question

AHax 요청의 모델 데이터를 Ember.CollectionView의 컨텐츠에 추가하여 항목 목록을 작성할 수있는 방법은 무엇입니까? API에서 반환 된 배열의 각 객체에서 title을 표시하는 목록을 렌더링하고 싶습니다. 나는 Ember와 함께 그것을 배우려고 노력하면서 Ember Data를 사용하고 있습니다.

다음은 현재 코드에 대한 바이올린입니다. 여기 http://jsfiddle.net/ahzk5pv1/

내 자바 스크립트, 템플릿, 그리고 내가 API에서 반환하고 데이터입니다 :

JS :

App = Ember.Application.create(); 

App.ListView = Ember.CollectionView.extend({ 
    tagName: 'ul', 

    //How do I set the content to be the data from the API??? 
    content: App.Page, 

    itemViewClass: Ember.View.extend({ 
    template: Ember.Handlebars.compile('the letter is = {{view.content}}') 
    }) 
}); 

App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({ 
    host: 'https://api.mongolab.com/api/1/databases/embertest2/collections', 

    //Construct query params for adding apiKey to the ajax url 
    findQuery: function(store, type, query) { 
    var url = this.buildURL(type.typeKey), 
    proc = 'GET', 
    obj = { data: query }, 
    theFinalQuery = url + "?" + $.param(query); 
    console.log('url =',url); 
    console.log('proc =',proc); 
    console.log('obj =',obj); 
    console.log('theFinalyQuery =',theFinalQuery); 
    return this._super(store, type, query); 
    }  
}); 

App.ApplicationSerializer = DS.RESTSerializer.extend({ 
    normalizePayload: function(payload) { 
    var pagesArray = []; 
    payload[0].pages.forEach(function(element, index) { 
     element.id = index; 
     pagesArray.push(element); 
    }) 

    return {pages: pagesArray}; 
    } 
}); 

App.Page = DS.Model.extend({ 
    character: DS.attr('string'), 
    title: DS.attr('string') 
}); 


App.HomeRoute = Ember.Route.extend({ 
    model: function() { 
    return this.store.find('page', {apiKey: 'somekey'}); 
    } 
}); 

App.Router.map(function() { 
    this.route('home', {path: '/'}); 
}); 

템플릿 : API에서

<script type="text/x-handlebars"> 
    <nav> 
    {{#link-to 'home'}}Home{{/link-to}} 
    </nav> 
    <div class="container"> 
    {{view 'list'}} 
    </div> 
</script> 

데이터 :

{ 
    "_id": { 
    "$oid": "54640c11e4b02a9e534aec27" 
    }, 
    "start": 0, 
    "count": 5, 
    "total": 1549, 
    "pages": [ 
    { 
     "character": "Luke Skywalker", 
     "title": "Star Wars" 
    }, 
    { 
     "character": "Sauron", 
     "title": "Lord Of The Rings" 
    }, 
    { 
     "character": "Jean Luc Piccard", 
     "title": "Star Trek: The Next Generation" 
    } 
    ] 
} 

Answer 1

에서

App.items = Ember.ArrayController.create() 

App.items.set('content',yourArray) 

App.ListView = Ember.CollectionView.extend({ 
    contentBinding: 'App.items' 
    itemViewClass: Ember.View.extend({ 
    template: Ember.Handlebars.compile('the letter is = {{view.content}}') 
    }) 
}) 

봐 그것은 시간이 좀 걸렸지 만이 내가 결국 사용하는 것입니다.

자바 스크립트 :

App = Ember.Application.create(); 

App.Router.map(function() { 

}); 

App.IndexController = Ember.ArrayController.extend({ 

}); 

App.IndexRoute = Ember.Route.extend({ 
    model : function(){ 
     return this.store.find('page', {apiKey: 'keyForApi'}); 
    }, 
}) 

App.HomeView = Ember.CollectionView.extend({ 
    tagName: 'ul', 
    contentBinding: 'controller', 

    itemViewClass  : Ember.View.extend({ 
     tagName : "li", 

     template : Ember.Handlebars.compile('<p><a href="#">Name:{{view.content.title}}</a></p>') 
    }) 
}); 

App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({ 
    host: 'https://api.mongolab.com/api/1/databases/embertest2/collections', 

    //Construct query params for adding apiKey to the ajax url 
    findQuery: function(store, type, query) { 
     var url = this.buildURL(type.typeKey), 
     proc = 'GET', 
     obj = { data: query }, 
     theFinalQuery = url + "?" + $.param(query); 
     console.log('url =',url); 
     console.log('proc =',proc); 
     console.log('obj =',obj); 
     console.log('theFinalyQuery =',theFinalQuery); 
     return this._super(store, type, query); 
    }  
}); 

App.ApplicationSerializer = DS.RESTSerializer.extend({ 
    normalizePayload: function(payload) { 
     var pagesArray = []; 

     payload[0].pages.forEach(function(element, index) { 
      element.id = index; 
      pagesArray.push(element); 
     }) 

     return {pages: pagesArray}; 
    } 
}); 

App.Page = DS.Model.extend({ 
    character: DS.attr('string'), 
    title: DS.attr('string') 
}); 

템플릿 :

<script type="text/x-handlebars" data-template-name="application"> 
    <nav> 
     Example 
    </nav> 
    <div class="container"> 
     {{outlet}} 
    </div> 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    {{view 'home'}} 
</script> 

Answer 2

Ember.ArrayController를 사용할 수 있습니다. 이 example