PROSAGA码农传奇-Xedge-如何在emberJS中构建元驱动的应用程序

<div class =“post-text”itemprop =“text”>
  
    如果我理解正确，那么您正在寻找基于REST端点返回数据的某种通用UI构建器。 Ember提供了
     <code>
 component
 </code>
     帮手。
  
  <BLOCKQUOTE>
    
      该
       <code>
 {{component}}
 </code>
       帮助器可用于推迟选择a
  组件运行时间。该
       <code>
 {{my-component}}
 </code>
       语法总是渲染
  相同的组件，同时使用
       <code>
 {{component}}
 </code>
       助手允许选择一个
  要动态渲染的组件。这在您需要的情况下很有用
  根据数据与不同的外部库进行交互。
  使用
       <code>
 {{component}}
 </code>
       助手会让你保持不同的逻辑
  分开了。
    
  </BLOCKQUOTE>
   <pre>
 <code>
 {{#each model as |post|}}
 {{!-- either foo-component or bar-component --}}
 {{component post.componentName post=post}}
{{/each}}

</code>
 </pre>
  
    读
    <a href="https://dockyard.com/blog/2016/05/13/component-helper" rel="nofollow noreferrer">
      这里
    </A>
     为了更彻底的解释。
  
  
    你基本上需要做的是为每个可能的属性构建一堆不同的组件
     <code>
 metadata
 </code>
    。您的模型将包含它们应呈现的组件，您将使用它们
     <code>
 component
 </code>
     帮助器动态呈现正确的元素。
  
  
    如果您使用的是基于表格的方法，请查看
    <a href="https://offirgolan.github.io/ember-light-table/#/" rel="nofollow noreferrer">
      余烬灯桌
    </A>
    。他们大量利用这种方法来构建表的列并支持自定义组件：
  
   <pre>
 <code>
 columns: computed(function() {
 return [{
 label: 'Avatar',
 valuePath: 'avatar',
 width: '60px',
 sortable: false,
 cellComponent: 'user-avatar'
 }, {
 label: 'First Name',
 valuePath: 'firstName',
 width: '150px'
 }];
 })

</code>
 </pre>
  
    正如你在这里看到的那样，列是一般的渲染，他们使用
     <code>
 cellComponent
 </code>
     用于确定要呈现的组件类型的属性。
  
</DIV>