Ember JS：为什么不执行该操作？

Question

I'm a noob in EmberJS. I have created an app using ember-cli.

Use Case : I want to have navigation with two menus: Home Admin. Admin has sub menus: Users Organizations. On clicking Users, /users route and on clicking Organizations /organizations route should fire. This is what I have done.

In the application.hbs file , I have the following line:

{{view 'main_menu'}}

this is the app/views/main_menu file:

import Ember from 'ember';
var MainMenu = Ember.CollectionView.extend({

  tagName: 'ul',
  classNames: ['nav', 'top-nav-menu'],
  content: function () {
   var result = [];
   result.push({label: "Dashboard", routing: 'dashboard', active: 'active'},
               {label: "Admin", routing: 'admin'});

  return result;

  }.property(),


 itemViewClass: Ember.View.extend({
   classNameBindings: ['active', ':top-nav-dropdown'],
   active: function(){
      return this.get('content.routing').indexOf('dashboard') === 0 ?"active":""; 
      return "";
    }.property(),
   templateName: 'main_menu',

    dropdownMenu: function () {
      var item = this.get('content').routing;
      var itemsWithDropdown = [ 'admin'];
      return itemsWithDropdown.contains(item);
    }.property(''),

    isAdminItem: function () {
      console.log("Inside is admin item");
      return this.get('content').routing == 'admin';
    }.property(''),


     dropdownCategories: function () {
      var itemName = this.get('content').routing;
      var categories = [];
      // create dropdown categories for each menu item
      if (itemName == 'admin') {
        categories = [];
        categories.push({
          name: 'users',
          url: 'users/',
          label: "Users"
        });
        categories.push({
          name: 'organizations',
          url: 'organizations/',
          label: "Organizations"
        });
      }
      return categories;
    }.property(''),

 AdminDropdownItemView: Ember.View.extend({
    // console.log("inside admin drop down item view");
     tagName: 'li',
     classNameBindings: 'isActive:active'.w(),
     isActive: function () {
       console.log("Inside the is active function");
       return this.get('item') === this.get('parentView.selectedAdminItem');
      }.property(),

      goToCategory: function (event) {
         console.log("inside admin drop down item view");
 /*I'm just printing something here to make sure control comes here before I proceed coding*/
       }
 })
})

});

export default MainMenu;

This is the app/templates/main_menu.hbs file:

<a href= {{view.content.routing}} > 
  {{{unbound view.content.label}}}
</a>

{{#if view.isAdminItem}}
  <ul class="top-nav-dropdown-menu">
    {{#each category in view.dropdownCategories}}
      {{#view view.AdminDropdownItemView item="category.name" }}
        <a href="#" {{action "goToCategory" category.url target="view"}}>{{category.label}}</a>
      {{/view}}
    {{/each}}
  </ul>
{{/if}}

All other actions get called but the action goToCategory does not get called. Nor does it give error in the console that no action handler written as it usually gives one.

Answer 1

You need to put your actions in a hash called actions :

AdminDropdownItemView: Ember.View.extend({
  ...
  actions: {
    goToCategory: function (event) {
      console.log("inside admin drop down item view");
    }
  }
})