ember cli admin下载 - ember cli admin源码下载

Ember-Cli-管理

Ember-cli-admin 是 ember-cli 项目的强大管理仪表板，它基于 ActiveAdmin 和 AbAdmin 的思想构建。

参见示例

Ember-cli-admin 示例

快速设置步骤

安装

运行ember install ember-cli-admin

或者，如果您使用 0.2.2 到 0.1.4 之间的 Ember CLI：

运行ember install:addon ember-cli-admin

或者，如果您使用的是 Ember CLI 0.1.4 或更早版本：

 npm install ember-cli-admin --save-dev
ember g ember-cli-admin

产生

运行ember g admin-app "My Awesome App Name"
运行ember g table-view-resource my-resources

就这样！

如果您想了解有关安装的更多详细信息或者只需要手动进行安装，您也可以查看您的 wiki。

蓝图

Ember-Cli-Admin 提供了一些默认的蓝图。

这些都是：

admin-app - 生成基本的 ember-cli-admin 应用程序支架；
table-view-controller - 生成 TableViewController；
树视图控制器- 生成 TreeViewController；
table-view-resource - 生成模型、TableViewController 并将它们注册到 MetaRouter 和 Navigation 中；
树视图资源- 与表视图资源相同，但具有适合它的 TreeViewController 和模型；

插件

Ember-Cli-Admin 有一些有用的插件，您可以使用它们来扩展默认仪表板功能：

Ember-Cli-Admin-Auth - 添加对 Ember-Cli-Admin 的授权
Ember-Cli-Admin-Languages - 在表单中添加多语言输入

特点概述

表单字段

您可以使用控制器中的formAttributes属性指定在管理表单中使用的属性：

 //app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;

export default Ember . Controller . extend ( TableViewController , {
  formAttributes : [ 'email' , 'name' ]
} ) ;

表字段

您可以使用控制器中的tableAttributes属性指定要在管理表中使用的属性：

 //app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;

export default Ember . Controller . extend ( TableViewController , {
  tableAttributes : [ 'email' , 'name' ]
} ) ;

项目动作

您可以使用控制器中的itemActions属性自定义项目操作：

 //app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;

export default Ember . Controller . extend ( TableViewController , {
  itemActions : [ { title : "Edit" ,
      "class" : "btn btn-small btn-primary" ,
      action : "edit" ,
      iconClass : "glyphicon glyphicon-pencil" } ]
} ) ;

或者您可以在控制器中使用additionalActions属性添加自定义操作：

 //app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;

export default Ember . Controller . extend ( TableViewController , {
  additionalActions : [ { title : "my action" , class : "btn my-action-css" , action : "my" } ] ,
  actions : {
    my : function ( model ) {
        return alert ( 'hi!' ) ;
    }
  }
} ) ;

也许您有模型依赖的操作，因此您可以在模型中添加：或者您可以在模型中使用additionalActions属性添加自定义操作：

 //app/models/user.js
additionalActions: function ( ) {
    var actions = [ ] ;
    if ( this . get ( 'is_active' ) ) {
      actions . pushObject ( { title : "Toggle Active" , class : "btn btn-small btn-warning" , action : "toggleActive" , iconClass : "glyphicon glyphicon-remove" } ) ;
    }
    else {
      actions . pushObject ( { title : "Toggle Active" , class : "btn btn-small btn-green" , action : "toggleActive" , iconClass : "glyphicon glyphicon-ok" } ) ;
    }
    return actions ;
  } . property ( 'is_active' )

批量操作

您可以在控制器中使用batchActions属性指定批处理操作：

 //app/controllers/users.js
import Ember from 'ember' ;
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view' ;

export default Ember . Controller . extend ( TableViewController , {
  batchActions : [ { title : "my action" , confirm : "Are you sure you to do it" , action : "my" } ] ,
  actions : {
    my : function ( model ) {
        return alert ( 'hi!' ) ;
    }
  }
} ) ;

Ember-cli-admin 还使用 ember-cli-map

我们目前支持google-map组件，可以通过以下简单设置将其添加到您的资源表单中

 //app/models/user.js
...
export default DS . Model . extend ( {
  ...
  lat :                        DS . attr ( 'number' )
  long :                       DS . attr ( 'number' )
  zoom :                       DS . attr ( 'number' )

  asGoogleMap : [ 'lat' , 'long' , 'zoom' ]

} ) ;

有关更多信息，请参阅 ember-cli-map 自述文件。

文件上传

假设我们的用户有一个主要头像和/或许多头像图片。

要在管理界面中显示和上传它们，请执行以下设置。

首先添加头像模型，从 ember-cli-admin Asset 扩展它：

 //app/models/avatar.js
import Asset from 'ember-cli-admin/logics/asset' ;
import DS from 'ember-data' ;

export default Asset . extend ( ) ;

将头像添加到用户模型中，并在fileuploads属性上指定它们：

 //app/models/user.js
...
export default DS . Model . extend ( {
  ...
  avatar :                     DS . belongsTo ( 'avatar' ) ,
  avatars :                    DS . hasMany ( 'avatar' , { async : true } ) ,

  fileuploads : [ "avatar" , "avatars" ]
} ) ;

然后添加一个 Avatar 适配器，如下所示：

 //app/adapters/avatar.js
import FileuploadAdapterMixin from 'ember-cli-admin/mixins/fileupload-adapter' ;
import ApplicationAdapter from './application' ;

var avatar = ApplicationAdapter . extend ( FileuploadAdapterMixin , {
} ) ;

export default avatar ;

默认情况下，FileuploadAdapterMixin Asset 类型属性为Asset 。

如果您的后端 API 期望不同类型的请求参数属性，您可以在资产模型中指定它。

假设您的 API 将 Avatar 类型排除为“Avatar”，而不是“Asset”。

此外，您需要在模型中定义content_type属性。 Ember-Cli-admin 接受标准 MIME 类型，并根据它猜测如何显示您的资产。

您可以通过编辑头像模型来做到这一点，如下所示：

 //app/models/avatar.js
...

var avatar = Asset . extend ( {
  type : DS . attr ( 'string' , { defaultValue : 'Avatar' } ) ,
  content_type : DS . attr ( 'string' )
} ) ;

...

之后，您应该在控制器中指定sortAssetsBy: 'assetOrderProperty' 。

设置标题

默认情况下，导航栏标题显示应用程序的模块前缀。您可以通过将“appName”属性添加到应用程序配置文件来将其更改为您选择的任何名称。

在这里，您还可以通过“titleLinksTo”属性更改标题链接实际指向的位置。如果未设置该属性，则默认指向根 URL。

 //config/environment.js
...
var ENV = {
  ...
  EmberENV : {
    appName : 'application name of your choice' ,
    titleLinksTo : '/example/url/'
    . . .
    }
  . . .
  }

就是这样！

自定义模板

您还可以为显示、编辑和新操作提供自己的模板。这些可以覆盖全局默认值以及特定资源的默认值。

全局覆盖

将您的模板放在app/templates/admin目录中。例如：

 #app/templates/admin/show.hbs
#app/templates/admin/new.hbs
#app/templates/admin/edit.hbs
#app/templates/admin/form.hbs

资源特定覆盖

将您的模板放在app/templates/[controllerName]目录中。对于用户资源：

 #app/templates/users/show.hbs
#app/templates/users/new.hbs
#app/templates/users/edit.hbs

如果您有admin/new.hbs和users/new.hbs模板，则后者将用于您的用户资源，第一个模板将用于所有其他资源。

搜寻中

除关系之外的所有模型属性都可以在资源索引页面上的搜索表单中进行搜索。现在，我们渲染所有属性的文本输入。这将在未来得到修复。

在资源控制器中，您可以指定以下形式显示的搜索属性：

 //app/controllers/users.js
...
isShowSearchForm : true ,
searchForm : ( function ( ) {
  return new SearchLogic ( ) . form ( this . get ( 'q' ) , function ( ) {
    this . input ( 'email' ) ;
    this . input ( 'name' , { type : 'autocomplete' , url : '/api/users/autocomplete' } ) ;
    this . input ( 'price' , { type : 'number' } ) ;
  } ) ;
} ) . property ( 'q' )
. . .

您还可以提供自己的搜索表单模板：

 #app/templates/admin/search.hbs
...

app/components/admin-typeahead.js中自动完成检查的更多选项

排序

您可以按属性对资源索引页上的记录进行升序或降序排序。要指定排序字段，请在资源控制器中添加sortFields属性：

 //app/controllers/users.js
import SearchLogic from 'ember-cli-admin/dsl/search'
...
  sortFields : [ 'id' , 'name' ] ,
...

侧边栏

您可以为每个资源放置侧边栏：

 //app/controllers/users.js
...
  isShowSidebar : true ,
  sidebarTitle : 'Hi i am sidebar' ,
  sidebarContent : '<p>Some Content</p>'
. . .

您还可以提供自己的侧边栏模板：

 #app/templates/users/sidebar.hbs
...

嵌套树视图

您可以在 Ember-Cli-Admin 中显示嵌套的记录树。它们是按照嵌套集模型模式实现的。

在你的模型中：

 //app/models/catalogue.js
...
export default DS . Model . extend ( {
  name : DS . attr ( 'string' ) ,
  parent_id : DS . attr ( 'number' ) , //necessary

  catalogues : DS . hasMany ( 'catalogue' , { async : true , inverse : null } ) ,

  children : Ember . computed . alias ( 'catalogues' ) ,        //necessary

  rebuildUrl : function ( ) {
     return '/api/v1/catalogues' ;   //necessary
  } . property ( )

} ) ;

将TreeViewController Mixin 添加到您的资源控制器：

 //app/controllers/catalogues.js
import TreeViewController from 'ember-cli-admin/mixins/controllers/tree-view' ;

export default Ember . Controller . extend ( TreeViewController , {
  formAttributes : [ 'name' ]
} ) ;

显示/隐藏表格列

您可以通过表标题中“批量操作”按钮旁边的表设置图标来选择要显示的表列。

每个控制器都有自己的一组表设置，这些设置通过浏览器本地存储保存。

与弹性搜索集成

现在您可以将 admin 与 elasticsearch 服务器集成。您需要使用elasticsearch适配器下载到供应商并将其导入到应用程序中。然后需要在elasticsearch中开启CORS，并创建资源路由：

  //routes/users.js

  /* global EDEK*/
  import Ember from 'ember' ;
  import BaseAdminRouteMixin from 'ember-cli-admin/mixins/routes/base' ;
  import ElasticSearch from 'ember-cli-admin/mixins/routes/elasticsearch' ;

  BaseAdminRouteMixin . reopen ( ElasticSearch ) ;

  export default Ember . Route . extend ( BaseAdminRouteMixin , {

    //you need implement this method for ES search
    _queryElasticsearch : function ( query , params ) {
      var fields = [ ] ;
      var text = "" ;
      for ( var value in params ) {
        fields . pushObject ( value ) ;
        text += params [ value ] . value ;
      }

      if ( fields . length === 0 ) {
        return query ;
      }

      return  EDEK . QueryDSL . query ( function ( ) {
        return this . flt ( {
          fields : fields ,
          like_text : text ,
          max_query_terms : 12
        } ) ;
      } ) ;
    }
  } ) ;

更改表格、面包屑、搜索栏等中文本的大小写。

您可以更改文本在表格、面包屑、搜索栏等中的显示方式。

为此，您应该在控制器中指定caseType属性。

例如，

  //controllers/users.js

  import TableViewController from 'ember-cli-admin/mixins/controllers/table-view'

  export default Ember . Controller . extend ( TableViewController , {
    caseType : 'title'
  } ) ;

默认情况下，您可以使用以下选项更改大小写：

title
upper
lower

默认情况下，所有文本均为小写。

对于面包屑：

 //config/environment.js
...
var ENV = {
  ...
  EmberENV : {
    appName : 'application name of your choice' ,
    titleLinksTo : '/example/url/' ,
    caseType : 'title'
    . . .
    }
  . . .
  }

贡献

请参阅我们有关贡献和路线图的 wiki 页面。

执照

[获得麻省理工学院许可] 1

展开