Ember.js導航控制器 - 我在正確的道路上嗎？

我目前正在構建一個內部使用的報告平臺，並決定使用Ember.js。到目前爲止，這既是好的也是壞的經歷;不好主要與文檔相關，以及我在網上研究的大部分內容都隨着最新的ember修訂而改變。Ember.js導航控制器 - 我在正確的道路上嗎？

我們使用的是twitter引導程序，並且引導程序的導航部分在li元素上具有active類，而不是a元素。當然，我的第一個傾向是僅僅使用jquery作爲黑客，只是手動改變主動類，感覺完全錯誤，並決定找到'正確'的方式。

所以我最終建立一個自定義視圖導航，見下圖：（注意：我使用browserify）

// NavigationView.js 
module.exports = Ember.View.create({ 
    templateName: 'navbar', 

    // Bind the 'selected' property on this view to the controllers 'selected' property. 
    selectedBinding: 'AnalyticsApp.NavigationController.selected', 

    // a single sub item for the nav 
    NavViewElement: Ember.View.extend({ 

     // Change the tag name to be a LI tag since bootstrap requires active class 
     // to exist on that, instead of the default (ember) anchor tag when using {{linkTo}} 
     tagName: 'li', 

     // Bind the 'active' class to the computed property; checking if this nav 
     // element is the current active tab. 
     classNameBindings: ['isActive:active'], 

     // This computed property will check if this nav item is active 
     isActive: function() { 
      return this.get('item') === this.get('parentView.selected'); 
     }.property('item', 'parentView.selected') 

    }) 
});

現在，建立視圖是非常簡單的，用它來渲染在setupController方法

{{#view view.NavViewElement item="network" }} 
    {{#linkTo 'network'}} 
     <i class="icon-sitemap"></i> 
     <span>Networks</span> 
    {{/linkTo}} 
{{/view}}

在所有路線我設置的「選中的」標籤像這樣

AnalyticsApp.NavigationController.set('selected', 'network');

：一個導航元件我可以使用此

現在，我不確定我的實施情況，如果有人能告訴我我是否偏離了目標或者我是否在正確的道路上，我將不勝感激。

我使用NavigationController（下面）作爲導航邏輯的中央存儲，它實際上是我已經擴展並鏈接.create()的ObjectController。

AnalyticsApp.NavigationController = Ember.ObjectController.extend({ 
    selected: null 
}).create();

我試過擴展一個標準控制器，但是並沒有公開set/get方法。使用ObjectController這種類型的設置是正確的類型？

感謝您花時間閱讀，我很欣賞任何和所有反饋。

-Ryan S.

來源

2013-05-17 Ryan Smith

因爲你'NavigationController'使用應用廣泛，已經嘗試過創建像這樣的控制器'AnalyticsApp.NavigationController = Ember.ObjectController.create（{selected：null}）;'？它會暴露'set'和'get'方法嗎？ – intuitivepixel

是的，這確實工作，謝謝！不知道我可以運行創建而不擴展。 –

麪糰是有區別的，如果你在控制器上使用'extend'，所有將要創建的實例將擁有'selected'屬性，而'create'就是你創建的實例。 – intuitivepixel

由於我的意見是有用的，我將其轉換爲一個答案。所以，既然你NavigationController使用應用廣泛，嘗試只是爲了創造控制器，像這樣：

AnalyticsApp.NavigationController = Ember.ObjectController.create({selected:null});

希望它可以幫助

來源

2013-05-17 20:52:28 intuitivepixel

感謝花時間，欣賞它。 –

歡迎您:) – intuitivepixel

Ember.js導航控制器 - 我在正確的道路上嗎？

回答

相關問題