0

感谢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
)

我创建了一个卢克方法的简化示例，该示例有效：http: //jsbin.com/ujosew/4/edit

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

任何解决方案的提示都是有益的，因为我没有选择......

---编辑感谢 Alex Matchneer (@machty) 在#emberjs IRC chan 上的帮助（我向所有寻求指导的人推荐） ---

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

1

通过覆盖renderTemplate：

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

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

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

他们引用不同的控制器。

于 2013-03-30T08:30:39.430 回答