How to load a tree asynchronously in ember js, node by node?

Question

Ember.js

Hello. A question. I'm trying to load the file system to the front, and I don't really understand how to manage loading the same type of data, so far I managed to load all the data about files and folders, but there are a lot of them, I would like to load them as needed.

<script type="text/x-handlebars" data-template-name="filefolders">
{{#each controller }}
{{name}} {{type}}
    <ul>
        {{#each children itemController="filefolder"}}
            <li>{{name}} <span {{action "loadChild" }}>(o)</span></li>
        {{/each}}
    </ul>
{{/each}}
</script>

App.FilefoldersRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('filefolder');
  }
});
//Какая то магия для самоссылки
var belongsTo = DS.belongsTo,
    hasMany = DS.hasMany;

App.Filefolder = DS.Model.extend({
  type: DS.attr('string'),
  name: DS.attr('string'),
  children: hasMany('filefolder', {async: true, inverse: 'parent'}),
  parent: belongsTo('filefolder', {async: true, inverse: 'children'})
});

Answer 1

Hello.
Load only the top level of files and directories in the route.
To Filefolder, add the status of whether the directory is open or not.

App.Filefolder = DS.Model.extend({
  type: DS.attr('string'),
  name: DS.attr('string'),
  children: hasMany('filefolder', {async: true, inverse: 'parent'}),
  parent: belongsTo('filefolder', {async: true, inverse: 'children'}),
  isOpen: false
});

Submit the template:

<script type="text/x-handlebars" data-template-name="filefolders">
{{#each controller }}
{{name}} {{type}} 
{{#if isOpen}}
    <ul>
        {{#each children itemController="filefolder"}}
            <li>{{name}} <span {{action "loadChild" }}>(o)</span></li>
        {{/each}}
    </ul>
{{/if}}
{{/each}}
</script>

Add an action that will toggle the isOpen state.
Enable the ability to upload catalog files in bulk:

App.ApplicationAdapter = DS.RESTAdapter.extend({
    coalesceFindRequests: true
});

Somehow it should work.

Answer 2

Thank you, I prompted a solution)) Component turned out to be the solution

<script type="text/x-handlebars" id="components/child-node">
    <li>{{node.name}} {{node.type}}
    {{#if node.is_folder}}
        <span {{action "openNode" }}>(o)</span>
    {{/if}}
    </li>
    {{#if node.isOpen}}
        <ul>
            {{#each  node_ch in node.children}}
                {{child-node node=node_ch}}
            {{/each}}
        </ul>
    {{/if}}
</script>

//Какая то магия для самоссылки
var belongsTo = DS.belongsTo,
    hasMany = DS.hasMany;

App.Filefolder = DS.Model.extend({

  type: DS.attr('string'),

  name: DS.attr('string'),
  children: hasMany('filefolder', {async: true, inverse: 'parent'}),
  parent: belongsTo('filefolder', {async: true, inverse: 'children'}),
  isOpen: false,

  is_folder: function(){
    return this.get('type') == 0;
  }.property('type'),
});

App.FilefoldersRoute = Ember.Route.extend({
  model: function(params) {
    // Берем безымянный файлфолдер (сервер подставляет корневой)
    return this.store.find('filefolder', {'':''});
  }
});

App.ChildNodeComponent = Ember.Component.extend({
  actions: {
    openNode: function() {
      console.log('child component');
      var model = this.get('node');
      model.set('isOpen', true);
    }
  }
});