1

我已经能够在我的木偶控制器中触发事件，如下所示：

 ...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(Controller, Backbone.Events); 扩展 Controller {};

根据@Ingro 的一些调试建议，我记录了 ItemView 的 this.$el 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 -->↵&lt;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>↵&lt;/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 -->↵&lt;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"

当然上面是在initialize方法里面。我想在创建一个“新”之后看看有什么不同：

/ 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">​…​&lt;/div>​
</div>​

@Ingro 包裹在一个 div 中，为什么这很重要？

有谁看到我做错了什么？

谢谢，

Andrew jsFiddle（见下面的评论）

4

1 回答 1

0

原来我以某种方式损坏了jquery。我使用 jsfiddle 来证明我的代码是正确的。然后我开始查看版本号要求并替换了 jquery 并开始工作。

感谢@Ingro 您的意见。

安德鲁

于 2013-05-28T12:29:01.270 回答