javascript - Ember js : Why does the action not get fired?

Question

我是 EmberJS 的菜鸟。我使用 ember-cli 创建了一个应用程序。

用例:我想要使用两个菜单进行导航:主页管理。管理有子菜单:用户组织。单击“用户”时，/users 路由和单击“组织”/organizations 路由应触发。这就是我所做的。

在application.hbs文件中，我有以下行:

{{view 'main_menu'}}

这是app/views/main_menu 文件:

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;

这是 app/templates/main_menu.hbs 文件:

<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}}

所有其他操作都会被调用，但操作 goToCategory 不会被调用。它也不会在控制台中给出没有编写任何操作处理程序的错误，因为它通常会给出错误。

Answer 1

您需要将操作放入名为 actions 的哈希中:

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