Ember：模型作为 CollectionView 的内容答案

【问题标题】：Ember: Model as content for CollectionViewEmber：模型作为 CollectionView 的内容
【发布时间】：2015-01-10 01:50:07
【问题描述】：

如何将 ajax 请求中的模型数据添加到 Ember.CollectionView 的内容中，以便创建项目列表？我想呈现一个列表，显示 API 返回的数组中每个对象的title。我正在使用 Ember Data，因为我正在尝试与 Ember 一起学习。

这是我当前代码的一个小提琴。 http://jsfiddle.net/ahzk5pv1/

这是我的 JavaScript、模板和我从 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: '/'});
});

模板：

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

来自 API 的数据：

{
  "_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"
    }
  ]
}

【问题讨论】：

标签： javascript jquery ember.js ember-data

【解决方案1】：

您可以使用 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}}')
  })
})

看看这个example

【讨论】：

在这种情况下yourArray 是什么？我怎样才能得到我得到的响应并设置它，而不是像小提琴中演示的那样写出数组？
谢谢！这确实引导我朝着正确的方向前进！

【解决方案2】：

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

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

模板：

<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>

【讨论】：