Javascript 余烬：模型作为CollectionView的内容

如何将ajax请求中的模型数据添加到

Ember.CollectionView

的内容中，以便创建项目列表？我想呈现一个列表，显示API返回的数组中每个对象的

标题
。我正在使用余烬数据，因为我正试图学习与余烬

这是我当前代码的一部分

以下是我的JavaScript、模板和从API返回的数据：

JS:

模板：

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

您可以使用Ember.ArrayController

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}}')
  })
})

看看这个
花了一些时间，但这就是我最终使用的

JavaScript:

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')
});

App=Ember.Application.create（）；
App.Router.map（函数（）{
});
App.IndexController=Ember.ArrayController.extend({
});
App.IndexRoute=Ember.Route.extend({
模型：函数（）{
返回this.store.find（'page'，{apiKey:'keyForApi'}）；
},
})
App.HomeView=Ember.CollectionView.extend({
标记名：“ul”，
contentBinding:'控制器'，
itemViewClass:Ember.View.extend({
标记名：“li”，
模板：Ember.handlebar.compile（“
”）
})
});
App.ApplicationAdapter=App.RESTAdapter=DS.RESTAdapter.extend({
主机：'https://api.mongolab.com/api/1/databases/embertest2/collections',
//构造用于将apiKey添加到ajax url的查询参数
findQuery：函数（存储、类型、查询）{
var url=this.buildURL（type.typeKey），
proc='GET'，
obj={data:query}，
theFinalQuery=url+“？”+$.param（查询）；
log（'url='，url）；
log（'proc='，proc）；
log（'obj='，obj）；
log（'theFinalyQuery='，theFinalQuery）；
返回此.\u super（存储、类型、查询）；
}    
});
App.ApplicationSerializer=DS.RESTSerializer.extend({
normalizePayload：功能（有效负载）{
var pagesArray=[]；
有效负载[0].pages.forEach（函数（元素，索引）{
element.id=索引；
pagesArray.push（元素）；
})
返回{pages:pagesArray}；
}
});
App.Page=DS.Model.extend({
字符：DS.attr（'string'），
标题：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>


例子
{{outlet}}
{{查看“主页”}
在此上下文中，您的数组是什么？我怎样才能接受我得到的响应并设置它，而不是像小提琴一样写出数组呢？谢谢！这确实把我引向了正确的方向！
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>