3

我一直在尝试弄清楚如何连接我的导航并显示哪个导航项处于活动状态。我在这里有一个看法：

  <script type="text/x-handlebars" data-template-name="nav">
  <ul class="nav">
    <li>{{#linkTo "index"}}Index{{/linkTo}}</li>
    <li>{{#linkTo "lunches"}}Lunches{{/linkTo}}</li>
    <li>{{#linkTo "people"}}People{{/linkTo}}</li>
  </ul>
  </script>

我正在使用 Bootstrap，并且 bootstrap 将“活动”类放在 <li> 而不是 <a> 上。Ember 默认将其放在 <a> 上。我已经尝试了各种方法来尝试获取活动路线并将其应用于此视图（并且我尝试手动设置一个值并使用 handlebars.helper 应用它，但它是一堆变形）。

这里的“正确”Ember 方式是什么？

我承认我在所有三个要点上都迷失了：

  1. 从路线中获取价值
  2. 将值从 Route 移动到视图（或将其绑定）
  3. 在我的标签中将值显示为没有变形的属性

显然，我在这里犯了很多基本错误。有人可以帮我纠正一下。

4

3 回答 3

2

可以在此线程上找到更好的答案。

我特别喜欢这个答案：

{{#linkTo "dashboard" tagName="li"}}
    <a {{bindAttr href="view.href"}}>Dashboard</a>
{{/linkTo}}
于 2013-04-04T15:56:03.043 回答
1

我不能给你一个完美的答案，因为这似乎是一个棘手的问题。但是有一个项目旨在整合 Twitter Bootstrap 和 Ember。所以看看ember-bootstrap。它不是一个完整的集成，但它也提供了NavList的实现。我认为它还没有使用 linkTo 助手，但我想它应该相对容易做到。

如果这不是您的选择，我只能看到编写linkTo 助手的扩展版本以便将锚包装在li 元素中的选项，但这也不是超级容易。

于 2013-03-21T20:53:13.273 回答
0

这就是我最终做的事情。它有效，但似乎太复杂了，所以我怀疑它存在根本缺陷。非常欢迎任何更正和/或改进。

这是创建导航栏的视图：

  <script type="text/x-handlebars" data-template-name="nav">
    <ul class="nav">
      {{#each navs}}
          <li {{bindAttr class="isActive:active"}}><a href="#" {{action select link}}> {{title}}</a></li>
      {{/each}}
    </ul>
  </script>

这是驱动它的大量代码:)

App.ApplicationController = Ember.Controller.extend({
    active: 'index'
}); 


App.ApplicationRoute = Ember.Route.extend({
    setupController: function(){
        var active = this.controllerFor('application').get('active');
        this.controllerFor('nav').set('model',{
            active:'index',
            navs: [
                { link:"index",   title:'Toad',    isActive: active === 'index' },
                { link:"lunches", title:'Lunches', isActive: active === 'lunches' },
                { link:"people",  title:'People',  isActive: active === 'people' }
            ]
        });
    },
    events: {
        select: function (item) {
            var nav = this.controllerFor('nav');
            var app = this.controllerFor('application');
            app.set('active',item);
            var active = app.get('active');
            var navs = nav.get('navs');
            new_navs = [];
            for (var i = navs.length - 1; i >= 0; i--) {
                new_navs[i] = { link: navs[i].link, title: navs[i].title, isActive: active === navs[i].link} ;
            };
            nav.set('navs',new_navs);
            this.transitionTo(item);
        }
    }
});

App.NavController = Ember.ObjectController.extend({

});


// Routes

App.Router.map(function() {
  this.route("people");
  this.route("lunches");
});

App.PeopleRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.send('select','people');
        controller.set('people', App.People.find());
    },
});

App.LunchesRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.send('select','lunches');
        controller.set('lunches', App.Event.find());
    },
});

拜托，做你最坏的事，把它撕开，把我纠正过来！

于 2013-03-26T13:22:53.893 回答