yield test

components.article-detail.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.article-list.js

import Ember from 'ember';

export default Ember.Component.extend({
}).reopenClass({ positionalParams: ['articles'] });

components.article-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  
}).reopenClass({ positionalParams: ['articles'] });;

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model(){
  	return {
            "pageNum": 1,
            "pageSize": 10,
            "size": 10,
            "orderBy": null,
            "startRow": 1,
            "endRow": 10,
            "total": 592,
            "pages": 60,
            "list": [
                    {
                        "id": 768,
                        "title": "我变得更好，不是为了结婚生子",
                        "description": "深夜十点，陪你读书。",
                        "extra": null,                       
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 767,
                        "title": "哈哈哈哈这是哪里来的妖艳小婊砸，我是打它呢还...",
                        "description": "主人你听我说，这次真不是我先动的手！",
                        "extra": null,                      
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 766,
                        "title": "豆瓣9.8，我想和每个热爱生命的你一起看它",
                        "description": "2016年最重磅的年末惊喜",
                        "extra": null,                       
                        "tags": "娱乐",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 765,
                        "title": "停车时一个小动作，就能看出是不是老司机",
                        "description": "二胖，你刚刚停车那样子是不对的~",
                        "extra": null,                        
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 764,
                        "title": "“模棱两可乐鸡翅，心如止水煮肉片”会说这些才...",
                        "description": "成竹在胸炒鸡蛋，您来一份不？",
                        "extra": null,                       
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 763,
                        "title": "[夜读]你这么年轻，为什么总是焦虑?",
                        "description": "路才刚刚开始，只要坚持走，就能走出自己的路。",
                        "extra": null,                       
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 762,
                        "title": "老师的这张照片，把网友都看哭了(老师的默默付...",
                        "description": "这样的事情很多，几乎所有老师都面临这样的选择，只能舍小家为大家。",
                        "extra": null,                       
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 761,
                        "title": "郑爽早年广告照秒变楚雨荨?赵丽颖当年萌翻，bab...",
                        "description": "都很好看~",
                        "extra": null,                         
                        "tags": "娱乐",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 760,
                        "title": "将军!印日“美梦”破碎，背后竟是中国下的一手...",
                        "description": "论谋略，中国人不愧为老祖宗。",
                        "extra": null,                    
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    },
                    {
                        "id": 759,
                        "title": "头条 境外媒体：中央对“港独”发出最严正警告",
                        "description": "参考消息网11月15日报道 境外媒体称，中国全国人大常委会日前在香港高等法院就议员宣誓案作出裁决前，通过了对",
                        "extra": null,                         
                        "tags": "",
                        "createTime": "2016-11-16 12:52:03"
                    }
            ],
            "firstPage": 1,
            "prePage": 0,
            "nextPage": 2,
            "lastPage": 8,
            "isFirstPage": true,
            "isLastPage": false,
            "hasPreviousPage": false,
            "hasNextPage": true,
            "navigatePages": 8,
            "navigatepageNums": [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8
            ]
        }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<hr>
测试yield的使用demo
<hr>
<br>
{{outlet}}
<br>
<br>

templates.components.article-detail.hbs

detail test
<hr>

templates.components.article-list.hbs

 
 <hr>
 {{#each api.articles.list as |article|}}
     <li>{{article.title}}
     <div>     
        	<span>{{article.description}}</span>
      </div>
     </li>
 {{/each}}

templates.components.article-section.hbs

{{ yield (hash 
  list = (component 'article-list')
  detail = (component 'article-detail')
  ) ( hash 
      articles = articles
  )
}}

templates.index.hbs

<h2> 带分页的组件使用测试</h2>

<hr>
{{model.pageSize}}
<hr>

{{#article-section   model as |articles api| }}
   <div  >
    {{articles.list api=api }}
    {{articles.detail api=api}}
  </div>
  <div>每页{{model.pageSize}}条</div>
  <div>下一页{{model.nextPage}}</div>
  <div>最后一页{{model.lastPage}}</div>
{{/article-section}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}