骨干事件回调绑定

我试图将用户定义的回调绑定为Backbone的单击事件。骨干事件回调绑定

var View = Backbone.View.extend({ 
 
    
 
    events: { 
 
     'click': 'testClick' 
 
    }, 
 
    
 
    tagName: "li", 
 
    
 
    attributes: { 
 
     class: "item" 
 
    }, 
 
    
 
    initialize: function() { 
 
     
 
     this.render(); 
 
     
 
    }, 
 
    
 
    testClick: function(){  
 
     
 
    }, 
 
    
 
    render: function() { 
 
     
 
     $("#container").append(this.$el.html("Click Me!!")); 
 
     
 
    } 
 
    
 
    }); 
 

 
function Item() { 
 
    
 
    var _view = View.extend({ 
 
    
 
    testClick: this.testClick.bind(this) 
 
    
 
    }); 
 
    
 
    this.view = new _view(); 
 
    
 
} 
 

 
Item.prototype = { 
 
    
 
    testClick: function() { 
 
    
 
    alert("testClick from prototype called!"); 
 
    
 
    } 
 
    
 
}; 
 

 

 
var myItem = new Item(); 
 

 
myItem.testClick = function() { 
 
    alert("testClick from instance called!"); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
</body> 
 
</html>

点击 “点击我”，它提醒 “testClick从原型叫！”

我不知道为什么实例的警报没有被调用。我在这里做错了什么？请帮忙！

来源

2016-11-28 Aneesh

由于下面的行：

testClick: this.testClick.bind(this)

分离的Item实例的testClick功能构件。你基本上正在重用一个函数，这两种方法之间没有联系。

考虑这个例子：“testClick从实例名为”

var obj = { 
    foo: function() { 
     console.log('I was foo!'); 
    } 
} 

var detachedFoo = obj.foo; 
obj.foo = function() { 
    console.log('The new foo!'); 
} 

obj.foo === detachedFoo // false 
obj.foo() // logs 'The new foo!' 
deatchedFoo(); // logs 'I was foo!'

如果您使用以下语法alert将显示。

testClick:() => { 
    this.testClick(); 
}

这是因为上述代码调用项目实例的当前.testClick方法。

来源

2016-11-28 11:16:50 undefined

非常感谢您的快速转身！即使我们改变testClick：this.testClick.bind（this）to testClick：this.testClick，它不起作用。 http://jsbin.com/fusupojuno/edit?html,js,console,output – Aneesh

@Aneesh不客气！这些代码片段没有区别，它不是'.bind'。再次查看示例。它使用箭头函数来记住'this'值。 'this'引用Item的实例，当调用方法时，它是实例的当前成员，而不是分离的函数。主要的是这个。 – undefined

我明白了。谢谢！！！ – Aneesh

骨干事件回调绑定

回答

相关问题