1

テンプレートに名前のリストがあります

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}}

収入_コントローラー.js.コーヒー

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 を知る方法を理解できないことです

4

1 に答える 1

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最後に、ルート内のすべてを処理できれば、削除できるはずです。

于 2013-03-19T10:42:20.893 に答える