backbone 2个model,2个view的事件触发问题?

WDYDXF 2014-01-14 10:57:19

假设页面有一个View,有一个Model,实例化modelA,设置为viewA的model.
实例化modelB,设置为viewB的model.
View监听一个自己元素的click事件,现在触发这个click事件后,这个click被执行了2次.
具体见代码:

 var CustomView = Backbone.View.extend({

                el: $('body'),

                events: {

                    "click .btnClick": "onClick"

                },

                initialize: function () {

                    this.render();

                },

                render: function () {

                    this.$el.append("<div class='btnClick' style='background-color:red; width:100px;height:100px'></div>");

                },

                onClick: function () {

                    console.log('onClick');

                }

            });



            var CustomModel = Backbone.Model.extend({

                defaults: {

                    name: 'test'

                }

            });



            var modelA = new CustomModel();

            var modelB = new CustomModel();



            var viewA = new CustomView({ model: modelA });

            var viewB = new CustomView({ model: modelB });

现在点击某一个div,可以在控制台中看到输出了2次"onClick",这是为什么?
现在希望点击哪个div,执行哪个div的onClick事件,应该怎么做呢?
请指导一下,谢谢

...全文

310 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

cxcstl 2014-06-10

打赏
举报

如果我的一个model对应一个view的，我叫做itemview ，我就不会用el赋值，用tagName：‘div’,使他们独立起来- -

WDYDXF 2014-01-14

打赏
举报

引用 5 楼 liuchaofeng1230 的回复:

因为你为body下的.btnClick元素绑定了2次onClick事件。jQuery里绑定几次就执行几次，所以你的回调执行了2次。

您好,能否再指点一下,这个问题,困扰一星期了

WDYDXF 2014-01-14

打赏
举报

引用 5 楼 liuchaofeng1230 的回复:

因为你为body下的.btnClick元素绑定了2次onClick事件。jQuery里绑定几次就执行几次，所以你的回调执行了2次。

events里只绑定了一次啊

WDYDXF 2014-01-14

打赏
举报

引用 5 楼 liuchaofeng1230 的回复:

因为你为body下的.btnClick元素绑定了2次onClick事件。jQuery里绑定几次就执行几次，所以你的回调执行了2次。

您好,那么view里的绑定事件,正确的写法应该怎么写?

风骑士 2014-01-14

打赏
举报

因为你为body下的.btnClick元素绑定了2次onClick事件。jQuery里绑定几次就执行几次，所以你的回调执行了2次。

WDYDXF 2014-01-14

打赏
举报

引用 2 楼 imi233 的回复:

backbone忘记得差不多了。backbone有中文社区的，可以去那问一下。

那边好冷清,我去知乎提问了

WDYDXF 2014-01-14

打赏
举报

引用 2 楼 imi233 的回复:

backbone忘记得差不多了。backbone有中文社区的，可以去那问一下。

谢谢,我这就去

孤飞不倦 2014-01-14

打赏
举报

backbone忘记得差不多了。backbone有中文社区的，可以去那问一下。

WDYDXF 2014-01-14

打赏
举报

您可以将代码拷到一个页面上,就可执行查看效果

WDYDXF 2014-01-14

打赏
举报

非常感谢您的指导

zhjdg 2014-01-14

打赏
举报

啊，第二个发错了

var CustomView = Backbone.View.extend({
    el: $('body'),
    events: function(){
    	var key = 'click #'+this.cid;
    	var obj={};
    	obj[key]='onClick';
    	 return obj;
    },
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.append("<div class='btnClick' id='" +this.cid +"' style='background-color:red; width:100px;height:100px'></div>");
    },
    onClick: function () {
        console.log(this.cid+'onClick');
    }
});

var CustomModel = Backbone.Model.extend({
    defaults: {
        name: 'test'
    }
});

var modelA = new CustomModel();
var modelB = new CustomModel();

var viewA = new CustomView({ model: modelA });
var viewB = new CustomView({ model: modelB });

zhjdg 2014-01-14

打赏
举报

<script>



var CustomView = Backbone.View.extend({
    el: $('body'),
    events: {
        "click .btnClick": "onClick"
    },
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.append("<div class='btnClick' style='background-color:red; width:100px;height:100px'></div>");
    },
    onClick: function () {
        console.log(this.cid+'onClick');
    }
});

var CustomModel = Backbone.Model.extend({
    defaults: {
        name: 'test'
    }
});

var modelA = new CustomModel();
var modelB = new CustomModel();

var viewA = new CustomView({ model: modelA });
var viewB = new CustomView({ model: modelB });



</script>

顺着你的思路

<script>



var CustomView = Backbone.View.extend({
    el: $('body'),
    events: {
        "click .btnClick": "onClick"
    },
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.append("<div class='btnClick' style='background-color:red; width:100px;height:100px'></div>");
    },
    onClick: function () {
        console.log(this.cid+'onClick');
    }
});

var CustomModel = Backbone.Model.extend({
    defaults: {
        name: 'test'
    }
});

var modelA = new CustomModel();
var modelB = new CustomModel();

var viewA = new CustomView({ model: modelA });
var viewB = new CustomView({ model: modelB });



</script>

风骑士 2014-01-14

打赏
举报

viewA的时候new了View，对body元素绑了一次"click .btnClick": "onClick"； viewB的时候又new了一次View，对body元素又绑了一次"click .btnClick": "onClick"；所以绑定了2次。 jQuery里可以对同一个元素绑定多次click事件。