2013-11-18 3 views
0

Другой вопрос магистра.
Вид, упомянутый ниже, отображает штраф.
Однако при нажатии на ссылку, следующая строка не получает казнены:

console.log($(e.currentTarget).data("id")); 

Но возвращает сообщение вместо (поэтому событие срабатывает должным образом):

Uncaught TypeError: undefined is not a function 

Это мнение:

define([ 
    'jQuery', 
    'marionette', 
    'handlebars', 
    'text', 
    'text!templates/main_menu.html', 
], function ($, Marionette, Handlebars, Text, Main_menu_tpl) { 
    'use strict'; 

    var Main_MenuView = Marionette.ItemView.extend({ 

     template: Handlebars.compile(Main_menu_tpl), 

     events: { 
      'click .main_menu_item':'select_menu' 
     }, 

     select_menu: function(e){ 
      e.preventDefault(); 
      //Here is the problem 
      console.log($(e.currentTarget).data("id")); 
     }, 

     render: function() { 
        var wrapper = {models: this.collection.toJSON()}; 
        this.$el.html(this.template(wrapper)); 
        return this; 
     } 
    }); 

    return Main_MenuView; 
}); 

шаблон выглядит следующим образом:

<ul id="main-menu"> 
    {{#each models}} 
     <li><a data-id="{{id}}" href="{{href}}" class='main_menu_item'">{{label}}</a></li> 
    {{/each}} 
</ul> 

enter image description here

+0

Мог вы создаете для этого смысл? Я вижу, что вы используете «Marionette.ItemView», есть ли причина, по которой вы не используете 'Marionette.CollectionView' или' Marionette.CompositeView' для обработки коллекции? –

+0

@AlbertoZaccagni Я создал этот сущность с моим исходным кодом: https://gist.github.com/anonymous/7527170. Я не очень разбираюсь в этом, поэтому извините, если он не соответствует определенным соглашениям. Что касается Collection/CompositeView: я рассмотрю это сейчас, так как я нахожусь на этапе обучения. Я не знаю, сможет ли он решить мою проблему с событием клика. Спасибо – Trace

+0

К сожалению, я имел в виду jsfiddle, извините. Таким образом, мы могли видеть это в действии, это трудно только из исходного кода. –

ответ

1

Проблема заключалась в том, что я определил зависимость JQuery в main.js (используя require.js) из CDN как "JQuery" вместо "JQuery".

Однако из-за некоторой поддержки @AlbertoZaccagni я впервые использовал compositeview для оптимизации моего предыдущего кода.

Текущий код:

Создание составного представления для отображения на основе коллекции

var main_menuView = new Main_menuCompositeView({collection: Header_menuCollection}); 
Zwoop.main_layout.headerRegion.show(main_menuView); 

Создание itemview

define([ 
    'jquery', 
    'marionette', 
    'handlebars', 
    'text', 
    'text!templates/main_menu_item_tpl.html', 
], function ($, Marionette, Handlebars, Text, Main_menu_item_tpl) { 
    'use strict'; 

    var Main_Menu_ItemView = Marionette.ItemView.extend({ 
     tagName: "li", 
     template: Handlebars.compile(Main_menu_item_tpl), 
     events: { 
      'click .main_menu_item':'select_menu' 
     }, 
     select_menu: function(e){ 
      e.preventDefault(); 
      console.log($(e.currentTarget).data("id")); 
     }   
    }); 

    return Main_Menu_ItemView; 
}); 

Создание зрения compostie:

define([ 
    'jquery', 
    'marionette', 
    'handlebars', 
    'text', 
    'text!templates/main_menu_composite_tpl.html',  
    'views/main_menuItemView' 
], function ($, Marionette, Handlebars, Text, Main_menu_composite_tpl, Main_menuItemView) { 

    var Main_menuCompositeView = Marionette.CompositeView.extend({ 
     template: Handlebars.compile(Main_menu_composite_tpl), 
     tagName: "ul", 
     itemView: Main_menuItemView 
    }); 

    return Main_menuCompositeView; 
}); 
Смежные вопросы