Как в ember js асинхронно грузить дерево, по узлам?

Question

[Klaus Kater]

Здравствуйте. Такой вопрос. Пытаюсь грузить на фронт файловую систему, и не очень понимаю как управлять загрузкой однотипных данных, пока получилось загрузить все данные о файлах и папках, но их много, хотелось бы подгружать по мере необходимости.

<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

[Станислав Романов]

Здравствуйте.

Грузите в роуте только верхний уровень файлов и каталогов.

К Filefolder добавьте статус открыт каталог или нет.

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
});

Подправьте шаблон:

<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>

Добавьте action который будет переключать состояние isOpen.

Включите возможность загружать файлы-каталоги скопом:

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

Как-то так должно работать.

Comments

[Klaus Kater]

Проблема, дочерние каталоги показываются, но дальше дерево не идет, просто в модели устанавливается исОпен в тру. Вроде есть у эмбера какой то компонент который может динамически подгружатся... но я пока не понял какой.

Answer 2

[Klaus Kater]

Спасибо, натолкнул на решение )) решением оказался Component

<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);
    }
  }
});

Comments

[kid-programmer]

Сейчас прям сижу и бьюсь над этой задачей (у меня дерево каталога), по вашему примеру вроде все получилось, теперь вопрос как создавать, удалять, редактирвать узлы... если можно в двух словах и напальца, я пойму))) Просто в эмбр только всего три дня осваиваю)))

[Klaus Kater]

Сам весь день документацию читаю, понять не могу ))