В настоящее время я создаю платформу для отчетности для внутреннего использования и решил использовать 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 С.
Так как ваш 'NavigationController' используется приложением широко, попытались просто создать контроллер, как так 'AnalyticsApp.NavigationController = Ember.ObjectController.create ({selected: null});'? Вызывает ли он методы 'set' &' get'? – intuitivepixel
Да, это действительно работает, спасибо! Не знал, что я могу просто запустить создание без расширения. –
Существует тестовое отличие, если вы используете 'extend' на контроллере, все экземпляры, которые будут созданы, будут иметь на нем свойство' selected', с 'create' только экземпляр, который вы создаете. – intuitivepixel