1
我已經能夠獲得事件在我的木偶控制器火，像這樣：Backbone.js的木偶ItemView控件單擊事件不工作
...snip...
var Controller = {};
_.extend(Controller, Backbone.Events);
// private
var Layout = Marionette.Layout.extend({
template: _.template(layout),
regions: {
inspectorStart: "#inspector_start",
loginStart: "#login_start",
playerStart: "#player_start"
}
});
// private
var _initializeLayout = function() {
console.log('initialize Start Layout...');
Controller.layout = new Layout();
Controller.layout.on('show', function() { **// This works**
Controller.trigger('startLayout:rendered'); **// This works**
});
vent.trigger('app:show', Controller.layout); **// This works**
};
// Listen for events ///////////////////////////////////////////
// controller attach a sub view
Controller.on("startLayout:rendered", function() { **// This works**
console.log('startLayout:rendered =>StartController'); **// This works**
// render views for the existing HTML in the template,...
var inspectorStartView = new InspectorStartView();
// and attach it to the layout (i.e. don't double render)
Controller.layout.inspectorStart.attachView(inspectorStartView);
Controller.trigger('inspectorStart:show', inspectorStartView); **// This works**
...snip...
然而，當我嘗試使用擴展木偶ItemView控件我可以不會讓事件或觸發器起作用。
// views/InspectorStartView.js
// -------
define(["jquery", "marionette", "text!templates/InspectorStart.html"],
function($, marionette, template){
var InspectorStartView = marionette.ItemView.extend({
template: template,
events: {
'click .starting_thumbnail' : 'start'
//'click #inspectorStart' : 'start' **// didn't work either**
},
//I had also tried triggers
triggers: {
//'click .starting_thumbnail' : 'inspectorStart:start'
'click #inspectorStart' : 'inspectorStart:start' **// didn't work either**
},
start:function(){ **// Doesn't get called**
console("Caught InspectorStartView click")
this.trigger("inspectorStart:start")
}
});
// Returns the View class
return InspectorStartView;
});
這裏是模板：
<!-- InspectorStart.html -->
<div id="inspectorStart" class="thumbnail starting_thumbnail">
<img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px">
<div class="caption">
<h3>Inspectors Enter Here</h3>
<p>Den Masters, Teachers, Parents, House Mothers, this is where you start.</p>
</div>
</div>
我也必須創建starting_thumbnail類，這樣我會得到一個指針：
.starting_thumbnail{
cursor: pointer;
}
我需要做別的事情讓div可點擊？
在我第一次嘗試我App.vent通過，並試圖用它來無濟於事我現在擴展控制器{}與_.extend（控制器，Backbone.Events）;
在從@Ingro一些調試建議我登錄的ItemView控件這是什麼。$埃爾ID。這個： console.log（[「InspectorStartView initalise」，this。$ el]）
這裏是輸出。有nodeName：「DIV」和localName是div。
["InspectorStartView initalise ", jQuery.fn.jQuery.init[1]]
0: "InspectorStartView initalise "
1: jQuery.fn.jQuery.init[1]
0: div
accessKey: ""
align: ""
attributes: NamedNodeMap
baseURI: "http://localhost:8001/index.html"
childElementCount: 1
childNodes: NodeList[3]
children: HTMLCollection[1]
classList: DOMTokenList
className: ""
clientHeight: 496
clientLeft: 0
clientTop: 0
clientWidth: 300
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: #comment
firstElementChild: div#inspectorStart.thumbnail starting_thumbnail
hidden: false
id: ""
innerHTML: "<!-- InspectorStart.html -->↵<div id="inspectorStart" class="thumbnail starting_thumbnail">↵ <img src="/img/detective-97715888.jpg" alt="Inspector" width="200px" height="300px">↵ <div class="caption">↵ <h3>Inspectors Enter Here</h3>↵ <p>Den Masters, Teachers, Parents, House Mothers, this is where you start.</p>↵ </div>↵</div>"
innerText: "↵Inspectors Enter Here↵Den Masters, Teachers, Parents, House Mothers, this is where you start.↵↵"
isContentEditable: false
lang: ""
lastChild: div#inspectorStart.thumbnail starting_thumbnail
lastElementChild: div#inspectorStart.thumbnail starting_thumbnail
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "DIV"
nodeType: 1
nodeValue: null
offsetHeight: 496
offsetLeft: 621
offsetParent: body
offsetTop: 388
offsetWidth: 300
<!-- all the on<eventname> were null -->
outerHTML: "<div><!-- InspectorStart.html -->↵<div id="inspectorStart" class="thumbnail starting_thumbnail">...snip..."
ownerDocument: #document
parentElement: li#inspector_start.span4
parentNode: li#inspector_start.span4
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 496
scrollLeft: 0
scrollTop: 0
scrollWidth: 300
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "DIV"
當然上面是在初始化方法裏面。我想看看創造一個「新」一前一後的區別：
/ controller show inspector in the layout/subview
Controller.on('inspectorStart:show', function(inspectorStartView) {
console.log('show inspector start view');
console.log(**'InspectorVartView instance this.$el : ', inspectorStartView.el**);
Controller.layout.inspectorStart.show(inspectorStartView);
});
輸出小得多：
InspectorVartView instance this.$el :
<div>
<!-- InspectorStart.html -->
<div id="inspectorStart" class="thumbnail starting_thumbnail">…</div>
</div>
@Ingro被包裹在一個div爲什麼會是怎麼回事？
有沒有人看到我在做什麼不正確？
感謝，
安德魯jsFiddle（見下文評論）
div #inspectorstart是您視圖的父元素，您的$ el？在這種情況下，你應該在你的活動中試試這個：''click'：'start'' – Ingro 2013-02-18 00:19:09
@Ingro謝謝你的建議。我嘗試'點擊'：'開始'它不起作用。我把名字從'start'改爲'fire'，看看名字是否有所不同。它沒有什麼區別。它似乎應該是直截了當的，但由於某種原因，它不是， – KingAndrew 2013-02-18 08:24:42
這是一個jsFiddle（http://jsfiddle.net/KingAndrew/SeDeL/）的開頭。我不確定如何添加骨幹和牽線木偶，但這是一個開始。 – KingAndrew 2013-02-18 08:51:26