观察视图中的控制器属性并对其做出反应

Question

感谢Luke Melia在上次EmberJS NYC聚会上的精彩演讲，我花了一整天的时间来重构我的东西，以应用你的一些概念，我真的很感激我如何更好地理解框架的一部分。

当被问及他将如何处理使控制器决定视图的一些行为时，他提到观察视图中控制器的属性。考虑到这一点，我继续拆分我的应用程序，以确保我利用路由器的能力来管理状态。所以我创建了一个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
)

我已经创建了一个Luke方法的简化示例:http://jsbin.com/ujosew/4/edit

所以在这一点上，我想知道我的视图正在观察哪个控制器是否没有混淆(您将注意到EditProfileController正在使用User模型)。

任何解决方案的提示都将是有益的，因为我的选择不多了…

—编辑感谢Alex Matchneer (@machty)在#emberjs IRC chan上的帮助(我向每个寻求指导的人推荐)—

正如泰迪在他的回答中指出的，通过改变控制器，观察者没有反应是正常的。所以我把代码改成了这个

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")
)

Answer 1

重写renderTemplate:

@render "edit_profile", {outlet: "edit_profile", controller: 'user'}

将视图的控制器设置为App.UserController。

路由中@controller为App.EditProfileController，视图中controller属性为App.UserController。

它们在引用不同的控制器