如何看待或appication的部分相互溝通emberjs

Question

我正在研究emberjs latly。我有一個關於觀點如何相互交流的問題。我知道視圖不通信，所以問題可能是路由或控制器（視圖模型）。

來自其他框架和語言我使用了一種稱爲pubsub的模式來傳播某些信息已更改的信息，並且其他視圖（對此信息感興趣的人）將訂閱，並且如果事件/消息是發送。

這是否也適用於emberjs哲學的模式？或者，如何根據其他部分的更改更新UI上的不同部分？

一個非常簡單的例子是：

-> Application 
    -> Navigation which contains a Link to the posts route with a number of current posts (count) 
    -> Posts route would have a list of post with details (and add,delete,etc) actions 

現在，當我創建後，將被添加到列表中，我應該如何更新導航後計數？

顯然這可能/也應該適用於更復雜的例子。 作爲一個說明： 此刻我也有一個統計服務器路由。因此，導航和它的帖子數將從服務器獲取，並且它不會綁定到帖子數組的長度...

用emberjs處理這樣的事情的最佳方式是什麼？

Answer 1

這在Ember.js中非常簡單。有不同的方法來設置它，但基本如下：由於Ember是一個MVC框架，所有視圖都可以訪問相同的底層數據。在對數據進行更改時，Ember的數據綁定將確保所有關注該更改的視圖都將更新。

特別針對你提到的例子，你可以簡單地在你的模板中包含{{ content.length }}，它將顯示ArrayController中的項目數（由Ember自動生成，儘管如果你想添加功能）。看看this jsFiddle。

模板：

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>ember-latest jsfiddle</h1>  
    {{ render 'navigation' controllers.users.content }} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="navigation"> 
     <h2>Index Content ({{ content.length }}):</h2> 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each}} 
     <li>{{firstName}} {{lastName}}</li> 
    {{/each}} 
    </ul> 
    <button {{action 'add'}}>Add</button>  
</script> 

路線：

App.ApplicationRoute = Ember.Route.extend({ 
    setupController: function() { 
     this.controllerFor('users').set('content', this.store.findAll('user')); 
    } 
}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return this.store.findAll('user'); 
    } 
}); 

控制器：

App.ApplicationController = Ember.Controller.extend({ 
    needs: ['users'], 
}); 

App.IndexController = Ember.ArrayController.extend({ 
    actions: { 
     add: function() { 
      this.get('store').createRecord('user', {firstName: 'New', lastName: 'Person'}); 
     } 
    } 
}); 

當你點擊你將看到如何計數自動更新按鈕。請注意，在這種情況下，我們只有一條路徑（用於更好地說明數據綁定），但如果您有索引路由（列出所有帖子）和詳細路徑（顯示單個帖子），則這同樣適用。

歡迎Ember.js的神奇世界:)

Answer 2

如http://emberjs.com/guides/views/指出，意見基本上都是用來處理用戶事件，並創建可重用的組件。然而，一些有用的事實是，

一個 View的模板將基於該模式，且相應的 Controller保持特性呈現

.The內容。

.A View可以訪問其相應Controller以及任何其他相關聯的控制器（經由needs屬性http://emberjs.com/guides/controllers/dependencies-between-controllers/），並且它們保持的數據。

。如果視圖共享一個模型，那麼只要模型發生變化，它們都會被更新。爲發生這種情況也有少數的情況下，最常見的一種是插入通過{{view}}輔助視圖。（http://emberjs.com/guides/views/inserting-views-in-templates/）

。如果瀏覽或它們相應的控制器觀察或綁定到共同屬性那麼它們也將被更新（http://emberjs.com/guides/object-model/classes-and-instances/）。

考慮到這些事實，可以根據特定系統的要求來解決這個問題。例如，某些方案可（伴有粗糙的例子），

• 如果執行CRUD操作的時候再結合崗位的Posts控制器的枚舉（http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/）可以更新您的所有數據/職位提供顯示總帖子的關聯Navigation控制器的計算屬性。

http://emberjs.jsbin.com/huqoq/1/edit

• 如果數據是延遲加載，例如在頁面中，然後讓控制器observe對帖子的控制器枚舉進行更改，可能會觸發向服務器發送請求以檢索帖子總數或根據操作（創建/刪除）更新計數器值的請求。

http://emberjs.jsbin.com/jomes/1/edit

• 的Navigation視圖可以簡單地在Posts視圖中插入和共享相同的模型，並有一個計算的屬性顯示總職位。

http://emberjs.jsbin.com/xujap/1/edit

• 的Navigation視圖可以通過{{render}}助手與職位的模型進行渲染。（http://emberjs.com/guides/templates/rendering-with-helpers/）

http://emberjs.jsbin.com/gihep/1/edit