觀察視圖中的控制器屬性和反應，因此

Question

得益於great presentation from Luke Melia during the last EmberJS NYC meetup，我已經度過了一夜，整天重構我的東西運用你的一些概念，我真的很感激我得到了更好地瞭解的部分框架。

當被問及他將如何處理使得控制器能夠決定一些觀點的行爲，他提到觀察控制器的屬性在視圖中。考慮到這一點，我繼續分割我的應用程序，以確保我利用路由器管理狀態的能力。所以我創建了一個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 
) 

App.EditProfileView = Ember.View.extend(

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

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

我創建了盧克的方法的一個簡單的例子，其工作原理edit_profile_view.coffee：http://jsbin.com/ujosew/4/edit

所以在這一點上，我想知道是否沒有關於我的視圖觀察哪個控制器（您將注意到EditProfileController正在使用用戶模型）的混淆。

，因爲我不多的選項任何提示的解決方案將是有益的......

--- 編輯感謝Alex Matchneer（@machty）對#emberjs IRC瓚的幫助（這我建議大家在尋找指導） ---

正如泰迪在他的回答中指出的，通過改變控制器，觀察者不會反應是正常的。所以我改變了代碼，這和它現在的作品

application_routes。咖啡

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_route s.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。

它們引用了不同的控制器。