Question

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

使用案例：我想要导航两个菜单：主页管理员。管理员有子菜单：用户组织。单击用户，/用户路由，然后单击组织/组织路由应该触发。这就是我所做的。

在application.hbs file中，我有以下一行：

{{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");
    }
  }
})

Ember js：为什么动作不会被解雇？

1 个答案: