1

我知道我可以找到这方面的例子，但我无法将它放入我的代码中而不会出错......只是不知道为什么。

我想从 set class="menu-active" 开始在菜单中的第一个。

<li><a {{action gotoAbout}} >About</a></li>

稍后当有人单击菜单的其他位置时，将 class="menu-active" 移动到该位置。

http://jsfiddle.net/kwladyka/LGArM/3/

还有一个额外的问题：你有什么意见可以让我的代码更好吗？

HTML
<script type="text/x-handlebars" data-template-name="application">
{{view App.NavbarView}}
{{outlet}}
</script> 

<script type="text/x-handlebars" data-template-name="navbar">
    <div id="menu" class="grid_12">
        <ul>
            <li><a {{bindAttr class="isAbout:active"}} {{action gotoAbout}} >About</a></li>
            <li><a {{bindAttr class="isProjects:active"}} {{action gotoProjects}} >Projekty</a></li>
            <li><a {{action gotoTechnology}} >Technologie</a></li>
            <li><a {{action gotoContact}} >Kontakt</a></li>
        </ul>
    </div>
</script>

余烬

$(function() {

console.log("### emberjs start ###");

App = Em.Application.create({
    rootElement: '#emberjs-container'
});

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.NavbarController = Em.Controller.extend({

});
App.NavbarView = Em.View.extend({
    templateName: 'navbar',
});


App.AboutView = Em.View.extend({
    templateName: 'about'
});

App.ProjectsView = Em.View.extend({
    templateName: 'projects'
});

App.TechnologyView = Em.View.extend({
    templateName: 'technology'
});

App.ContactView = Em.View.extend({
    templateName: 'contact'
});


App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        gotoAbout: Ember.Route.transitionTo('about'),
        gotoProjects: Ember.Route.transitionTo('projects'),
        gotoTechnology: Ember.Route.transitionTo('technology'),
        gotoContact: Ember.Route.transitionTo('contact'),

        // STATES
        about: Em.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('about');
            }
        }),

        projects: Em.Route.extend({
            route: '/projects',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('projects');
            }
        }),

        technology: Em.Route.extend({
            route: '/technology',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('technology');
            }
        }),

        contact: Em.Route.extend({
            route: '/contact',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('contact');
            }
        })
    })
});

App.initialize();

});
4

0 回答 0