Ember——展示文章 列表 并包含翻页功能的典型例子

{% extends 'wxbase/base.html' %}

{% block topbody %}
<script src="/static/wxbase/js/libs/handlebars-v2.0.0.js"></script>
<script src="/static/wxbase/js/libs/ember-1.9.1.js"></script>
<script src="/static/wxbase/js/libs/ember-data.min.js"></script>
<script src="/static/wxbase/js/libs/localstorage_adapter.js"></script>
<!-- 用到post api的模板中引入 -->
<script src="/static/wxbase/js/getcookie.js"></script>
<script src="/static/wxbase/js/ajaxcsrf.js"></script>
<script src="/static/wxbase/plugins/layer-master/layer.min.js"></script>
<script src="/static/wxbase/js/conf.js"></script>
<script src="/static/wxbase/js/utils.js"></script>
<script type="text/javascript">
var reqGetData = GetReqData()
var appItemId = reqGetData.appitem_id
</script>

<script type="text/x-handlebars">
{% endblock %}
{% block endbody %}
</script>
{% endblock %}

{% block content %}

{% verbatim %}
<div id="content" class="col-xs-12 col-sm-10" style="z-index: 10;">
    <div class="preloader" style="display: none;">
        <img src="/static/wxbase/img/devoops_getdata.gif" class="devoops-getdata" alt="preloader">
    </div>
    <div>
        <div class="row">
            <div id="breadcrumb" class="col-xs-12">
                <a href="#" class="show-sidebar">
                    <i class="fa fa-bars"></i>
                </a>
                <ol class="breadcrumb pull-left">
                    <li><a href="">首页</a></li>
                    <li><a href="#">发消息</a></li>
                    <li><a href="#">素材库</a></li>
                </ol>
                <div id="social" class="pull-right">
                    <a href="#"><i class="fa fa-google-plus"></i></a>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-linkedin"></i></a>
                    <a href="#"><i class="fa fa-youtube"></i></a>
                </div>
            </div>
        </div>
        <ul style="height:30px;">
            <li style="float:left;width:100px;color:red;font-size:16px;"><a onclick="location.href=getSendMsgUrl+'?appitem_id='+appItemId">发消息</a></li>
            <li style="float:left;width:100px;"><a onclick="location.href=newsListUrl+'?appitem_id='+appItemId">素材库</a></li>
            <li style="float:left;width:100px;"><a onclick="location.href=articleListUrl+'?appitem_id='+appItemId">文章</a></li>
        </ul>
        <div class="h_sendtext">
            <ul style="width:100%;float: left;">
                <li style="width:46%;float:left;border-right:1px dotted #615F5F;min-height:800px;">
                    <h3>选中的文章</h3>
                    <ul>
                        <li><b>文章题目</b></li>
                    </ul>
                </li>
                <li style="width:49%;float:left;padding-left:2%;min-height:800px;">
                    <h3>素材库</h3>
                    <ul>
                        {{#each article in articleList.data}}
                        <li><input type="checkbox"><label>{{article.title}}</label></li>
                        {{/each}}
                        <li>
                            {{#each page in articleList.pageList}}
                            <button {{action 'topage' page on='click'}}>{{page}}</button>
                            {{/each}}
                        </li>
                    </ul>
                </li>
            </ul>
           
        </div>
    </div>
</div>
{% endverbatim %}
{% endblock %}

{% block foot %}
{% verbatim %}

<script>
App = Ember.Application.create();
App.Article = Ember.Object.extend();
App.Article.reopenClass({
    getCurrentArticle: function(url){
        var articleList = App.Article.create();
        $.ajax({
            url: url,
            type: 'GET',
            data: 'json'
        }).then(function(data){
            data['pageList'] = getPageList(data.pages);
            articleList.setProperties(data);
        });
        return articleList;
    }
});
function getPageList(pages){
    var pageList = [];
    for(var i=1; i<=pages;i++){
        pageList.push(i)
    }
    return pageList
}

App.ApplicationController = Ember.Controller.extend({
    articleList: App.Article.getCurrentArticle(getArticleListUrl+appItemId+'?p_size=2'),
    actions:{
        topage: function(page){
            this.set('articleList',App.Article.getCurrentArticle(getArticleListUrl+appItemId+'?p_size=2&p='+page))
        }
    }
})
</script>
{% endverbatim %}
{% endblock %}