Ember——传数据——代码示例

实例一：
<script>

        var getDepartmentUrl = "{% url 'wxbase:api_department_detail' 1 %}"

</script>

<div id="demo2" style="margin-top:45px;float: left;margin-top: 0px;">
            <p style="margin-left:10px;">
                <a {{action'departmentsDetail'department.get_parent_api on='click'}}>返回</a>
            </p>
            <ul id="treelist" style="width: 267.833333333333px;">
                <li id="phtml_1" class="open">
                    <a >{{department.seniority}}--{{department.name}}</a>
                    <ul>  
                        {{#each depart in department.sons}}
                            <li id="phtml_2">
                              <a {{action 'departmentsDetail' depart.get_detail_apion='click'}}>{{depart.has_son_bool}}{{depart.name}}</a>
                            </li>
                        {{/each}}
                    </ul>
                </li>
            </ul>          
        </div>
<script>
App = Ember.Application.create();
App.Department = Ember.Object.extend();

App.Department.reopenClass({
    getCurrentDepart: function(url) {
        var department = App.Department.create(); 
        $.ajax({
            url: url,
            type: "GET",
            data: 'json'
        }).then(function(data) {
            department.setProperties(data); 
        });
        return department;
    }
});

//1.定义模板中变量： departments和模板中事件actiions
App.ApplicationController = Ember.Controller.extend(
   {
    department: App.Department.getCurrentDepart(getDepartmentUrl),
    actions:{
        departmentsDetail: function(url){
                this.set('department', App.Department.getCurrentDepart(url))
        }
    }
    }
);

</script>



实例二：
<script>
var getAppUrl = '{% url "wxbase:api_appitem_list" %}'
 var getDepartmentUrl = "{% url 'wxbase:api_department_detail' 1 %}"
</script>

<ul class="app_box js_agent_box">
    {{outlet}}
</ul>

<ul>
    {{departments.id}}--{{departments.name}}
    {{#each department in departments.sons}}
        {{department.name}}
    {{/each}}
</ul>

<script type="text/x-handlebars" data-template-name="tests">
{{#each test in model}}
    <li class="item">
        <a {{bind-attr href="test.detail_url"}} class="logo_img border_alpha" data-id="1006000349">
            <img style="width:80px;height:80px;" {{bind-attr src="test.image_url"}} class="img_logo">
        </a>
        <h3 class="name">{{test.name}}</h3>
    </li>
{{/each}}
</script>

<script>
window.Apps = Ember.Application.create();
Apps.Router.map(function(){
    this.resource('tests', { path: '/' }); 
}) 
Apps.ApplicationRoute = Ember.Route.extend({
  model: function() {
      returnEmber.$.getJS ON(getAppUrl);
  }
});
$.get(getDepartmentUrl, function(data){
    Apps.ApplicationController = Ember.Controller.extend(
        {departments: data}
    );
})
</script>