Как создать мета-управляемое приложение в emberJS

Question

Примечание : Английский, используемый в этой статье (вместе с терминами), может быть немного "не в порядке" , так как мой роднойязык не английскийБудьте уверены, я изо всех сил старался сделать его максимально читабельным, и если я что-то пропустил, пожалуйста, прокомментируйте, прежде чем понижать голосование, чтобы я мог соответствующим образом обновить вопрос (я все еще новичок в этом)

Поэтому я искал большую часть интернета, чтобы найти решение для этого, чтобы найти учебник, который помог бы мне в подходе на основе метаданных для создания приложения на EmberJS.Документация по Ember не объясняет ничего о подходе, только определение функции extractMeta здесь и базовый обзор того, как обрабатывать метаданные здесь .

Чего я хочу добиться, так это создать портал с Sugar в качестве серверной части приложения.Приложение будет использовать REST API для вызовов для извлечения данных, а также metadata приложения.Мы хотим сделать приложение универсальным, так что независимо от того, какой модуль вызывается, метаданные извлекаются для определения полей, требуемых в модели, отфильтрованная часть данных, необходимых для вызова, соответствующим образом заполняется в модели и отображаетсяв общем шаблоне, который будет глобальным и будет использоваться во всем приложении.

metadata включает в себя различные элементы, такие как buttons, panels, attributes (каждый с несколькими слоями данных внутри)и т.д., каждый может использоваться один или несколько раз в течение вызова или не использоваться вообще.Например, для отображения приложения потребуется attributes для отображения в таблице, а также buttons для добавления, удаления обновлений и т. Д. При нажатии может потребоваться, например, panel, добавление определенной записи, котораяСам может содержать различные поля.

Например, это экземпляр Sugar по умолчанию, который показывает отведения в данных, обратите внимание, что он содержит различные компоненты.

Вот еще один пример панели, которая появляется, когда я нажимаю кнопку создать в списке потенциальных клиентов, обратите внимание на поля, которые появляются внутри панели

Обратите внимание, что я понимаю, как выполнять вызовы API REST для data, а также metadata.Но как мне превратить это в универсальное мета-управляемое приложение - вот с чем я борюсь.Заранее спасибо!

Answer 1

Если я правильно понимаю, вы ищете какой-то универсальный конструктор пользовательского интерфейса, основанный на возвращенных данных из конечной точки REST. Ember предоставляет component помощник.

Помощник {{component}} может использоваться для отсрочки выбора компонент для запуска. Синтаксис {{my-component}} всегда отображает тот же компонент, а использование помощника {{component}} позволяет выбрать компонент для визуализации на лету. Это полезно в тех случаях, когда вы хотите взаимодействовать с различными внешними библиотеками в зависимости от данных. Использование помощника {{component}} позволит вам сохранить другую логику хорошо отделены.

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
{{/each}}

Прочитайте здесь для более подробного объяснения.

Что вам, по сути, нужно сделать, - это создать группу различных компонентов для каждого из возможных атрибутов из metadata. Ваши модели будут содержать компоненты, которые они должны отображать, и вы будете использовать помощник component для динамического отображения правильных элементов.

Если вы используете табличный подход, взгляните на ember light table . Они активно используют этот подход при построении столбцов для своих таблиц и поддержке пользовательских компонентов:

columns: computed(function() {
    return [{
      label: 'Avatar',
      valuePath: 'avatar',
      width: '60px',
      sortable: false,
      cellComponent: 'user-avatar'
    }, {
      label: 'First Name',
      valuePath: 'firstName',
      width: '150px'
    }];
  })

Как вы видите здесь, столбцы отображаются в общем, и они используют свойство cellComponent, чтобы определить, какой тип компонента будет отображаться.