2013-05-17 2 views
2

В настоящее время я создаю платформу для отчетности для внутреннего использования и решил использовать Ember.js. Пока это был хороший и плохой опыт; плохое в основном связано с документацией и как большинство вещей, которые я исследовал в Интернете, изменились с последними версиями ember.Контроллер навигации Ember.js - я на правильном пути?

Мы используем twitter bootstrap, а часть навигации bootstrap имеет класс active на элементе li вместо элемента 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') 

    }) 
}); 

Теперь, настраивая вид был довольно прямо вперед, чтобы использовать его, чтобы сделать нав элемент можно использовать следующим образом:

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

во всех маршрутах в методе setupController я устанавливаю вкладку «Selected», как так

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

Теперь я здесь не уверен относительно моей реализации, и я был бы очень признателен, если бы кто-нибудь мог сказать мне, если я нахожусь вне цели или если я на правильном пути.

Я использую NavigationController (ниже), чтобы быть центральным магазином для навигации логики, это на самом деле ObjectController, что я расширил и приковал .create() на.

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

Я попытался расширить стандартный контроллер, но это не раскрывает методы set/get. Использует ли ObjectController для такого типа настройки правильный тип?

Спасибо, что нашли время, чтобы прочитать, и я ценю отзывы и отзывы.

-Ryan С.

+1

Так как ваш 'NavigationController' используется приложением широко, попытались просто создать контроллер, как так 'AnalyticsApp.NavigationController = Ember.ObjectController.create ({selected: null});'? Вызывает ли он методы 'set' &' get'? – intuitivepixel

+0

Да, это действительно работает, спасибо! Не знал, что я могу просто запустить создание без расширения. –

+0

Существует тестовое отличие, если вы используете 'extend' на контроллере, все экземпляры, которые будут созданы, будут иметь на нем свойство' selected', с 'create' только экземпляр, который вы создаете. – intuitivepixel

ответ

3

Поскольку мой комментарий был полезным, я преобразовать его в ответ. Таким образом, поскольку ваш NavigationController используется приложением широко, попробуйте просто создать контроллер так:

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

Надеется, что это помогает

+0

Спасибо за принимая время, оцените его. –

+0

Добро пожаловать :) – intuitivepixel

Смежные вопросы