2016-11-28 3 views
0

Я пытаюсь связать определенный пользователем обратный вызов как событие Clickbone.Связанный с Backbone вызов callback

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 от прототипа называется!"

Я не уверен, почему предупреждение из экземпляра не вызвано. Что я здесь делаю неправильно? Пожалуйста помоги!

ответ

2

Из следующей строки:

testClick: this.testClick.bind(this) 

отсоединяетtestClick функции члена экземпляра Item. Вы, по сути, повторно используете функцию, и нет никакой связи между двумя методами.

Рассмотрим следующий пример: «! 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 метод экземпляра товара.

+0

Большое спасибо за быстрый поворот !! даже если мы изменим testClick: this.testClick.bind (this) на testClick: this.testClick, он не работает. http://jsbin.com/fusupojuno/edit?html,js,console,output – Aneesh

+0

@Aneesh Добро пожаловать! Нет никакой разницы между этими фрагментами кода, это не о '.bind'. См. Пример снова. Он использует функцию стрелки для запоминания значения 'this'. 'this' относится к экземпляру Item и когда метод вызывается, это текущий член экземпляра, а не отдельная функция. Главное в этом. – undefined

+0

Я понял. Спасибо!!! – Aneesh