2

我目前正在构建一个供内部使用的报告平台，并决定使用 Ember.js。到目前为止，这既是好又坏的经历。坏处主要与文档有关，以及我在网上研究的大部分内容随着 ember 的最新修订而发生了变化。

我们正在使用 twitter bootstrap，并且 bootstrap 的导航部分在元素而不是元素上具有active类。自然，我的第一个倾向是将 jquery 用作 hack 并手动更改活动类，这感觉完全错误并决定找到“正确”的方式。lia

所以我最终为导航构建了一个自定义视图，见下文：（注意：我使用的是 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方法的所有路线中，我正在设置“选定”选项卡，如下所示

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

现在这是我不确定我的实施的地方，如果有人能告诉我我是否偏离目标或者我是否走在正确的道路上，我将不胜感激。

我使用NavigationController（下）作为导航逻辑的中央存储，它实际上是ObjectController我扩展和链接.create()的。

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

我尝试扩展一个标准控制器，但这并没有公开 set / get 方法。ObjectController对这种类型的设置使用正确的类型吗？

感谢您花时间阅读，我感谢任何和所有反馈。

-瑞恩·S。

4

1 回答 1

3

由于我的评论很有用，我会将其转换为答案。因此，由于您NavigationController在应用程序范围内使用，因此请尝试像这样创建控制器：

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

希望能帮助到你

于 2013-05-17T20:52:28.910 回答