了解Backbone.js的事件处理程序 [英] Understanding Backbone.js event handler

问题描述

因此​​，这里是我的看法：

So here is my view:

$(function() {
var ImageManipulation = Backbone.View.extend({

    el: $('body'),
    tagName: "img",

    events: {
        'mouseover img': 'fullsize',
        'click img#current': 'shrink'
    },
    initialize: function() {
        _.bindAll(this, 'render', 'fullsize', 'shrink');

        //var message = this.fullsize;
        //message.bind("test", this.fullsize);
    },
    render: function() {

    },
    fullsize: function() {
        console.log("in fullsize function");
        console.log(this.el);
        $('.drop-shadow').click(function() {
            console.log(this.id);
            if (this.id != 'current') {
                $('.individual').fadeIn();
                $(this).css('position', 'absolute');
                $(this).css('z-index', '999');
                $(this).animate({
                    top: '10px',
                    height: '432px',
                }, 500, function() {
                    this.id = "current";
                    console.log("animation complete");
                    return true;
                });
            };
        });
    },
    shrink: function() {
        $('.individual').fadeOut();
        $('#current').animate({
            height: '150px',
        }, 500, function() {
            this.id = "";
            $(this).css('position', 'relative');
            $(this).css('z-index', '1');
            console.log("animation complete");
            return true;
        });
    }
});
var startImages = new ImageManipulation();
});

我不明白的是如何改变EL使'这'接管点击功能我在全尺寸。我宁愿有点击jQuery函数删除并有鼠标悬停功能是再点击一下，但我似乎无法弄清楚如何这个分配给正在单击特定图像。我希望我的问题是有道理的。

What I don't understand is how to change the el to make 'this' take over the click function I have in full-size. I would much rather have the click jQuery function removed and have the mouseover function be another click, but I cant seem to figure out how to assign 'this' to the particular image that is being clicked. I hope my question makes sense.

推荐答案

骨干的事件处理程序假定您想了解的对象（包括其code，其DOM重新presentation，在 View.el 对象）的每一个事件，而该事件是为了更改视图和/或模型的某些方面。点击的实际目标是什么你认为知道，或者认为是能够得到。

Backbone's event handler assumes that you want to know about the object (both its code, and its DOM representation, the View.el object) for every event, and that the event is intended to change some aspect of the view and/or model. The actual target of the click is something you're assumed to know, or assumed to be able to derive.

推导是相当简单：

fullsize: function(ev) {
    target = $(ev.currentTarget);

和替换目标您的电话中所有的这一点。引用。。 这一点。将继续参照查看实例。在你的内部函数，匿名一个被指派给 .drop阴影，这一点。指的是这样的对象刚刚点击。如果你想前往周边环境，使用闭合转发成​​语：

And replace all your this. references within your call to target.. this. will continue to refer to the View instance. In your inner function, the anonymous one assigned to .drop-shadow, this. will refer to the object that was just clicked on. If you want access to the surrounding context, use the closure forwarding idiom:

fullsize: function(ev) {
    var target = ev.currentTarget;
    var self = this;
    $('.drop-shadow').click(function(inner_ev) {
        console.log(this.id);  // the same as inner_ev.currentTarget
        console.log(self.cid); // the containing view's CID

这篇关于了解Backbone.js的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！