Question

感谢great presentation from Luke Melia during the last EmberJS NYC meetup，我花了整整一夜的时间来重构我的东西以应用你的一些概念，我真的很感激我如何更好地理解框架的一部分。

当被问及如何处理控制器指示视图的某些行为时，他提到在视图中观察控制器的属性。考虑到这一点，我继续分割我的应用程序，以确保我利用路由器的能力来管理状态。所以我创建了一个EditProfile路由。

为了指示切换我的EditProfile部分，我在EditProfileController上创建了一个showEditProfile属性，并在EditProfileView中设置了一个观察者。

问题在于我无法让它发挥作用。如果我单击EditProfile模板中的“save”或“cancel”按钮，它会分别触发“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陈的帮助（我向所有寻求指导的人推荐） ---

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

Answer 1

重写renderTemplate：

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

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

在路线中，@controller为App.EditProfileController，但在视图中，controller属性是指App.UserController。

他们正在引用不同的控制器。

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

1 个答案: