0

前回の EmberJS NYC ミートアップでの Luke Melia からの素晴らしいプレゼンテーションのおかげで、私は一晩中、あなたのコンセプトのいくつかを適用するために私のものをリファクタリングしました。フレームワークの一部をよりよく理解できたことに本当に感謝しています。

コントローラーがビューの動作の一部を指示できるようにする方法について質問されたとき、彼は、ビュー内のコントローラーの属性を観察することについて言及しました。それを念頭に置いて、ルーター機能を活用して状態を管理できるように、アプリを分割しました。そこで、EditProfile ルートを作成しました。

EditProfile セクションの切り替えを指示するために、EditProfileController に showEditProfile 属性を作成し、EditProfileView にオブザーバーを設定しました。

問題は、私がそれを機能させることができないということです。EditProfile テンプレートで「保存」または「キャンセル」ボタンをクリックすると、それぞれ「confirmProfileUpdate」または「cancelProfileUpdate」がトリガーされ、showEditProfile が false に設定されます。それを行うと、ビューのオブザーバーがトリガーされますよね? そうではないようです。

コードは次のとおりです。

application_routes.coffee 

    App.ApplicationRoute = Ember.Route.extend(
      setupController: ->
        @controllerFor("user").set "model" App.User.find(App.current_profile_id)
)

edit_profile.hbs 

<div id="profile_edit">
  <div class="section">
    <h1>Edit Profile</h1>
  </div>
  <form id="edit_user">
    <div class="section">
      <label>Name</label>
      {{view Em.TextField valueBinding="name" }}
      <label>Location</label>
      {{view Em.TextField valueBinding="location" }}
      <label>Motto</label>
      {{view Em.TextField valueBinding="description" }}
    </div>
    <div class="section">
      <label>Email</label>
      {{view Em.TextField valueBinding="email" }}
      <label>Password</label>
      {{view Em.TextField valueBinding="password" type="password" }}
      <label>Re-enter Password</label>
      {{view Em.TextField valueBinding="password_confirmation" type="password" }}
      <div class="btns">
        <button type="submit" class="btn" {{action "confirmProfileUpdate" content}}>Save</button>
        <button type="submit" class="btn" {{action "cancelProfileUpdate" content}}>Cancel</button>
      </div>
    </div>
  </form>
</div>

edit_profile_controller.coffee 

App.EditProfileController = Ember.ObjectController.extend(
  showEditProfile: true
)

edit_profile_routes.coffee 

App.EditProfileRoute = Ember.Route.extend(
  renderTemplate: -> 
   @render "edit_profile", {outlet: "edit_profile", controller: 'user'}

  events:
    confirmProfileUpdate: (record) ->
      record.get("transaction").commit()
      # @transitionTo('index')
      console.log "confirmed! toggling the slider back up"
      @controller.set "showEditProfile", false

    cancelProfileUpdate: (record) ->
      record.get("transaction").rollback()
      # @transitionTo('index')
      console.log "cancelling! toggling the slider back up"
      @controller.set "showEditProfile", false
)

edit_profile_view.coffee 

App.EditProfileView = Ember.View.extend(

  toggleEditProfile: (->
    console.log "toggling!"
    $("#profile_ edit").slideToggle "slow"
  ).observes("controller.showEditProfile")

  didInsertElement: ->
    @controller.set "showEditProfile", true
)

動作するルークのアプローチの簡単な例を作成しました: http://jsbin.com/ujosew/4/edit

したがって、この時点で、ビューが監視しているコントローラーについて混乱がないかどうか疑問に思っています (EditProfileController が User モデルを使用していることに注意してください)。

オプションが不足しているため、解決策のヒントは有益です...

--- #emberjs IRC chan の Alex Matchneer (@machty) の助けに感謝して編集します (ガイダンスを探しているすべての人にお勧めします) ---

Teddy が回答で指摘したように、コントローラーを変更することで、オブザーバーが反応しなくなるのは正常なことでした。だから私はコードをこれに変更しました、そしてそれは今動作します

application_routes.coffee 

    App.ApplicationRoute = Ember.Route.extend(
      setupController: ->
        @controllerFor("user").set "model" App.User.find(App.current_profile_id)
)

edit_profile.hbs 

<div class="section">
  <h1>Edit Profile</h1>
</div>
<form id="edit_user">
  <div class="section">
    <label>Name</label>
    {{view Em.TextField valueBinding="name" }}
    <label>Location</label>
    {{view Em.TextField valueBinding="location" }}
    <label>Description</label>
    {{view Em.TextField valueBinding="description" }}
  </div>
  <div class="section">
    <label>Email</label>
    {{view Em.TextField valueBinding="email" }}
    <label>Password</label>
    {{view Em.TextField valueBinding="password" type="password" }}
    <label>Re-enter Password</label>
    {{view Em.TextField valueBinding="password_confirmation" type="password" }}
    <div class="btns">
      <button type="submit" class="btn" {{action "confirmProfileUpdate" content}}>Save</button>
      <button type="submit" class="btn" {{action "cancelProfileUpdate" content}}>Cancel</button>
    </div>
  </div>
</form>

edit_profile_controller.coffee 

App.EditProfileController = Ember.ObjectController.extend(
  needs: ['user']
  visible: true
)

edit_profile_routes.coffee 

App.EditProfileRoute = Ember.Route.extend(
  renderTemplate: Ember.K

  setupController: ->
    @controllerFor("edit_profile").set "model", App.User.find(App.current_profile_id)

  activate: ->
    @controllerFor("edit_profile").set "visible", true

  deactivate: ->
    @controllerFor("edit_profile").set "visible", false

  events:
    confirmProfileUpdate: (record) ->
      record.get("transaction").commit()
      @transitionTo('index')

    cancelProfileUpdate: (record) ->
      record.get("transaction").rollback()
      @transitionTo('index')
)

edit_profile_view.coffee 

App.EditProfileView = Ember.View.extend(
  classNames: ['profile_edit']

  toggleEditProfile: (->
    $(".profile_edit").slideToggle "slow"
  ).observes("controller.visible")

  didInsertElement: ->
    $(".profile_edit").slideToggle "slow" if @get("controller.visible")
)
4

1 に答える 1