Question

我一直在花时间学习Ember，我想知道我是否可以延迟加载嵌套树列表结构？ API仅向我提供树的当前级别。当我单击列表中的某个项目时，我想触发ajax调用以从childrenUrl属性获取数据，并将数据作为嵌套列表附加到所单击的项目下。

我可以渲染树的顶层，但我不知道如何继续。

这是我当前代码的小提琴。点击＆＃34;页面＆＃34;链接以查看呈现的列表的顶级。 http://jsfiddle.net/jdcskepn/

这是我的JS，模板和模拟数据：

JavaScript：

App = Ember.Application.create();

App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({
    host: 'https://api.mongolab.com/api/1/databases/emberdatatest/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({
    path: DS.attr('string'),
    childrenUrl: DS.attr('string'),
    author: DS.attr('string'),
    title: DS.attr('string')
});


App.HomeRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('page', {apiKey: 'key'});   
    }
});

App.Router.map(function() {
    this.route('home', {path: '/'});
    this.route('home', {path: 'home'});
});

模板：

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

<script type="text/x-handlebars" id="home">
    Tree List here
    <ul>
        {{#each model}}
            <li><a {{bind-attr href=childrenUrl}}>{{path}}</a></li>
        {{/each}}
    </ul>
</script>

数据：

{
  "_id": {
    "$oid": "5462bcb4e4b0b16f9d2c17c9"
  },
  "start": 0,
  "count": 5,
  "total": 1549,
  "pages": [
    {
        "path": "homepage",
        "childrenUrl": "https://api.mongolab.com/api/1/databases/emberdatatest/collections/pages/homepage",
        "author": "Luke Skywalker",
        "title": "home page"
    },
    {
        "path": "blogpage",
        "childrenUrl": "https://api.mongolab.com/api/1/databases/emberdatatest/collections/blogpage",
        "author": "Sauran",
        "title": "Blog page"
    },
    {
        "path": "aboutpage",
        "childrenUrl": "https://api.mongolab.com/api/1/databases/emberdatatest/collections/aboutpage",
        "author": "Jean-Luc Piccard",
        "title": "About Page"
    }
  ]
}

Ember：Lazy加载嵌套树列表

0 个答案: