Question

我的模板中有一个名单

index.handlebars.js.coffee

<ul>
    {{#each income in controller}}
      <li {{action editIncome}}>{{income.name}}</li>
    {{/each}}
</ul>

{{#if isEdited}}
  // I want to edit clicked element here
{{else}}
  {{view EmberMoney.NewIncomeView}}
{{/if}}

incomes_controller.js.coffee

EmberMoney.IncomesIndexController = Ember.ArrayController.extend

  isEdited: false

  addIncome: ->
    EmberMoney.Income.createRecord(name: @get('newIncomeName'))
    @get('store').commit()
    @set('newIncomeName', "")

  editIncome: ->
    this.set('isEdited', true)

router.js.coffee

EmberMoney.Router.reopen
  location: 'history'

EmberMoney.Router.map ->
  @resource 'incomes', ->

EmberMoney.IncomesIndexRoute = Ember.Route.extend
  model: -> 
    EmberMoney.Income.find()

当我点击每个名字时，我不想在这个页面上渲染编辑模板。因此，如果我点击列表下的名称“Kate”，它将生成一个编辑此记录的模板。

我无法理解如何做到这一点。感谢帮助。

UPD：我的问题是我无法理解如何知道我想要编辑元素的编辑对象ID

Answer 1

尝试处理路线中的状态。

EmberMoney.Router.map ->
  @resource 'incomes', ->
    @route 'index' # this route is used for creating new records
    @route 'edit', { path: '/:income_id/edit' } # this route is used to edit a record

EmberMoney.IncomesRoute = Ember.Route.extend
  model: -> 
    EmberMoney.Income.find()

EmberMoney.IncomesEditRoute = Ember.Route.extend

  setupController: (controller, model) ->
    if model.get('transaction') == @get('store').get('defaultTransaction')
      transaction = @get('store').transaction()
      transaction.add model
    controller.set('content', model)

  deactivate: ->
    @modelFor('incomes.edit').get('transaction').rollback()

  events: 
    submit: (record) ->
      record.one 'didUpdateRecord', =>
        @transitionTo 'index'
      record.get('transaction').commit()

现在将模板放在incomes.handlebars中，而不是index

<ul>
    {{#each income in controller}}
      <li>{{#linkTo "incomes.edit" income}} {{income.name}} {{/linkTo}}</li>
    {{/each}}
</ul>
{{outlet}}

然后在incomes/index：

{{view EmberMoney.NewIncomeView}}

在incomes/edit：

<form {{action submit content on="submit"}}>
  {{view Ember.TextField valueBinding=name}}
</form>

此处的优点是您已将状态存储在路线中。此外，您可以控制每个路线/州内的事件。

我没有包含管理创建新记录的IncomesIndexRoute的逻辑。但我想你可以遵循edit路线的类似逻辑。

最后，如果您设法处理路线中的所有内容，您应该能够删除IncomesIndexController。

单击Ember显示编辑模板

1 个答案: