2015-05-04 32 views
0

我是EmberJS的noob。我已經使用ember-cli創建了一個應用程序。Ember js:爲什麼行動不被解僱?

使用案例:我想用兩個菜單進行導航:Home Admin。管理員有子菜單:用戶組織。在點擊用戶時,/用戶路線和點擊組織/組織路線應該啓動。這就是我所做的。

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; 

這是應用程序/模板/ 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不會被調用。它也不會在控制檯中給出錯誤,因爲它通常沒有寫入任何動作處理程序。

+3

次數不宜使用。他們將被視爲Ember的內部組成部分。我相信耶胡達或湯姆在他們的EmberJS演講中都會這樣說。相反,使用組件。 –

+1

我同意在這種情況下視圖是不必要的。我實際上是跟着我參考的一個應用程序。基本上問題以及我應該如何實現我的目標也是爲什麼行動不會被解僱 – inquisitive

+1

嘗試在視圖中的操作對象中添加'goToCategory'。 like actions:{goToCategory:function ........} – blessenm

回答

3

你需要把你的行爲在一個名爲actions哈希:

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