JQuery $ (это) не работает с Coffeescript и магистрали - PullRequest
Новая
       2

JQuery $ (это) не работает с Coffeescript и магистрали

0 голосов
/ 24 ноября 2011

$ (это) не работает с cofeescript и backbone. Он генерирует корректный код, но я не понимаю, почему он не работает.Для временного решения я использовал $ (event.target). 

Jobmatch.Views.Jobs ||= {}

class Jobmatch.Views.Jobs.JobView extends Backbone.View
template: JST["recommendation/templates/jobs/job"]

initialize: () ->
  @ajs = new Jobmatch.Collections.ApplicantJobsCollection()
  @ajs.reset(@options.applicant_jobs || [])
  @aj = new @ajs.model()
  @index = @options.index || 0

events:
  "click .job_apply" : "apply"

tagName: "tr"

apply: (event)->
   target = $(this) // As this is not working as I expected,So I used below line.
   target = $(event.target) 
   if @options.user_jobmatch_valid
     @ajs.create({job_id: @model.get('id') })
     target.parents("a.job_apply").prev().click();
   else
    target.parents("a.job_apply").next().click();
   false


render: ->
  $(this.el).html(@template(@model.toJSON()))
@

И этот сценарий сгенерировал следующий код: 

JobView.prototype.apply = function(event) { 
  var target; target = $(this); // not working it is not elementt object
      target =   $(event.target);// this is element object ,working fine    
      target.parents("a.job_apply").prev().click(); 
};

Ответы [ 3 ]

2 голосов
/ 30 января 2013

В базовой документации http://backbonejs.org/#View-delegateEvents В нем четко сказано:

Все прикрепленные обратные вызовы привязываются к представлению перед передачей в jQuery, поэтому, когда обратные вызовы вызываются, это продолжает ссылаться к объекту просмотра.

Это решает одну из проблем, с которой сталкиваются многие объектно-ориентированные программисты в jQuery, - он переопределяет контекст во всех своих обработчиках событий. Как указывалось ранее, вы часто можете использовать событие, которое передается в качестве аргумента обработчика. Однако event.target часто может ссылаться на дочерние элементы, а не на this, который всегда ссылается на элемент, выбранный с помощью запроса. Например: 

<a href="#"><b>my link</b></a>

$('a').on('click', myfunction); function myfunction(event) {
    this // refers to the "a" element
    event.target // refers to the "b" element 
}

В этих случаях при присоединении событий мыши с Backbone к элементам с потомками используйте event.currentTarget, чтобы получить ссылку на элемент, к которому был прикреплен обработчик событий. 

events: { 
  "click a" : "myFunction" }, 
...
function myFunction(event) {
  var $this = $(event.currentTarget);
  // Now, $this is the same as jQuery's $(this)
}
1 голос
/ 21 августа 2012

С событиями, связанными с помощью представления Backbone, this будет установлено на само представление.Это отличается от обычного jQuery, где this относится к элементу DOM

. Таким образом, в представлении Backbone: 

events: { "click a" : "myfunction" },
...
function myfunction(e) {
    this // refers to the view
    e.target // refers to the element
}

Тогда как в обычном jQuery: 

$('a').on('click', myfunction);
...
function myfunction() {
    this // refers to the element
    e.target // also refers to the element
}

В обоих случаях вы можете использовать e.target для ссылки на элемент

1 голос
/ 24 ноября 2011

все зависит от контекста,

this в некоторых случаях связано с вашим взглядом, возьмите этот пример: 

var myView = Backbone.View.extend({
    events: { "click a" : "myfunction" },
    initialize: function(){
        _.bindAll(this, 'render', 'myfunction');
    },
    render: function(){
        // rendering data here...
    },
    myfunction: function(e){
        console.log(e.target); // will log the clicked DOM element => <a>
        console.log(this);  // will log the view => myView
    }

});

window.v = new myView({ el : $('#mydiv') });
window.v.render();

Как видите, если вы запустите этот пример, вы увидите разницу между this и e.target. однако это все из-за ключевой линии в методе initialize. 

_.bindAll(this, 'methodname', [ methodnames ] );

это связывает представление с this, когда используется один из данных методов. если вы удалите myfunction из этого списка, console.log(this); зарегистрирует сам элемент. но вы не сможете получить доступ к данным или функциям с вашей точки зрения .... Вы можете выбрать, если привязать представление к this.

...