Question

我目前正在构建一个供内部使用的报告平台，并决定使用Ember.js。到目前为止，这既是好的也是坏的经历;坏事主要与文档有关，我在网上研究的大部分内容都随着最新版本的ember而改变。

我们正在使用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方法的所有路线中，我都设置了“选中”标签

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

现在这里我不确定我的实施情况，如果有人能告诉我我是否偏离目标或者我是否走在正确的道路上，我真的很感激。

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

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

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

感谢您花时间阅读，并感谢所有反馈。

-Ryan S。

Answer 1

由于我的评论很有用，我会将其转换为答案。因此，由于您的NavigationController被广泛使用，请尝试创建控制器，如下所示：

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

希望有所帮助

Ember.js导航控制器 - 我在正确的道路上吗？

1 个答案: