Question

我正在Ember建立一个办公室接待应用程序。当一个人到达办公室时，他们会弹出应用程序并通过三步向导：

选择参观原因
选择您要来的人
确认

该应用还允许管理员查看所有访问次数并查看个人访问。

我有Visit和Person个模型我使用Ember Data连接到服务器。这是我的路线的样子：

App.Router.map () ->
  @resource 'visits', ->
    @resource 'visit', { path: '/:visit_id' }
    @resource 'new', ->
      @route 'welcome'
      @route 'directory'
      @route 'thanks'

这允许我在Visit中创建新的VisitsNewRoute模型，并在welcome，directory和thanks视图中使用它。

这很有效。但是，拥有new资源感觉不对，特别是因为我可以想到我的应用程序中至少还需要一条new路径。

有更好的方法吗？

Answer 1

建议的做法是在资源类型下使用create / new路由，new下visits，然后`transitionTo（＆＃39;访问。欢迎＆＃39;，newRecord）。（我说这一切都假设欢迎，目录和感谢不是新记录创建的一部分）。

App.Router.map () ->
  @resource 'visits', ->
    @route 'new'
    @resource 'visit', { path: '/:visit_id' }
      @route 'welcome'
      @route 'directory'
      @route 'thanks'

Answer 2

在处理嵌套多个级别的路线时，Ember并不总是按照您想要的方式命名路线。我会将您的“新”路线命名如下：

@resource 'visits.new', path: 'new', ->

您可以使用多种方法来构建路由，具体取决于您分配模型ID的方式以及是否使用localStorage来保留用户编辑，直到它们被持久保存到服务器。

我的路线模式如下：

App.Router.map () ->
  @resource 'visits', ->
    @route 'new'
    @route 'crud', path: ':visit_id'

我的'新'路由在路由model回调中创建一个新资源，在我的模型中自动生成一个v4 UUID。然后新路由在transitionTo回调中执行afterModel crud路由。实际上，'visits.new'路线充当蹦床，并允许您从模板/菜单等轻松使用{{link-to 'visits.new'}}。

上述方法允许您使用单个crud路由和crud控制器来处理模型的所有show / create / update / delete操作。可以在模板中使用模型isNew属性来处理创建和更新之间的任何差异。

我还使用localStorage，以便新创建的（但尚未保留的）模型在浏览器刷新后仍然存在，UUID对于这两种模型和持久的复杂模型图都非常有用。

上面的路由器模式在我的应用程序中发生了很多，所以我定义了一些基本的Route类和一个路由类构建器，但一般模式如下：

如果使用UUID：

App.VisitsNewRoute = Em.Route.extend
  model: (params, transition)->
    App.Visit.create(params)
  afterModel: (model,transition) ->
    @transitionTo 'visits.crud', model

App.VisitsCrudRoute = Em.Route.extend
   model: (params,transition) ->
    App.Visit.find(params['visit_id'])

如果不使用UUID，则路由不同。在我搬到UUID之前我做了类似的事情，它将模型ID'new'视为特例：

App.Router.map () ->
  @resource 'visits', ->
    @route 'crud', path: ':visit_id'

App.VisitsCrudRoute = App.Route.extend
   model: (params, transition) ->
     visit_id = params['visit_id']
     if visit_id == 'new' then App.Visit.create() else App.Visit.find(visit_id)
   serialize: (model, params) ->
     return if params.length < 1 or !model
     segment = {}
     segment[params[0]] = if model.isNew() then 'new' else model.get('id')
     segment

对于管理向导步骤状态的特定情况，我会考虑使用Ember Query Params，它允许您在控制器级别指定参数中的当前步骤

查询参数示例：

App.VisitsCrudController = Em.ObjectController.extend
  queryParams: ['step'],
  step: 'welcome'

链接到视图中的下一步：

{{#link-to 'visits.crud' (query-params step="directory")}}Next{{/link-to}}

您可能还想为下一步和前一步定义一些计算属性，并为视图逻辑定义一些布尔属性，例如isWelcome，isDirectory。

Answer 3

我认为您可以将new资源更改为newVisit，如下所示：

App.Router.map () ->
  @resource 'visits', ->
    @resource 'visit', { path: '/:visit_id' }
  @resource 'newVisit', ->
    @route 'welcome'
    @route 'directory'
    @route 'thanks'

现在您将拥有NewVisitRoute，您可以在其中创建要在每个子路径中使用的新Visit模型。

您将能够使用路径名称转换到此路线：newVisit.welcome，newVisit.directory和newVisit.thanks。您可以在link-to帮助程序链接中使用此路径名称：

{{link-to "Welcome", "newVisit.welcome"}}

在ember中创建一个新资源

3 个答案: