Backbone.js Eventos vinculantes. ¿Como "Delegado" en jQuery?

Question

Soy nuevo en Backbone.js. Y veo eso en Backbone.js, los eventos vinculantes:

var PersonView = Backbone.View.extend({
    ....
    events : {
        "click button.btnSay" : "saySomething"
    },

    saySomething : function(){
        ....
    }
    ...
});

... no necesita el botón.

Y ahora, el problema es que podemos cambiar cualquier botón en nuestra página HTML a .btnsay (por Firebug, etc.). Y eventualmente obtienen a los oyentes. como podemos prevenir esto?

Answer 1

No es similar a delegate se usa delegate (a menos que el evento no tenga un selector). La vinculación del evento en la columna vertebral se ve así:

if (selector === '') {
  $(this.el).bind(eventName, method);
} else {
  $(this.el).delegate(selector, eventName, method);
}

Entonces usa delegate en el elemento de la vista. Que al menos limita los eventos a elementos dentro de la vista.

No puedes evitar que la gente se meta con tus elementos y eventos en un depurador. Pueden cambiar el HTML, el CSS e incluso editar su JavaScript para que no pueda evitar que causen problemas en su página. Sin embargo, puede evitar que hagan un desastre en su servidor, simplemente no confíe en nada que backbone envíe a su servidor y valida todo de la misma manera que validaría cualquier otra cosa que venga del mundo exterior.

Básicamente, no pierdas tu tiempo preocupándote de que alguien rompa su propia cara con un ladrillo jugando con tu HTML/Events/JavaScript. Deja que se lastimen todo lo que quieran. Pero proteja su servidor al no confiar en nada del mundo exterior (y sus servidores ni siquiera deberían confiar en sí mismos más de lo que tienen).

Answer 2

Debajo del capó, Backbone usa el "Delegado" de JQuery para conectar los eventos. Así que no es que esto sea "como" jQuery, es jQuery haciéndolo por nosotros.

Para evitar problemas de alcance y garantizar que nuestros eventos de vista solo funcionen con los elementos HTML/DOM que queremos, todos events Las declaraciones se alcanzan a la vista el.

Cuando se instancia una vista columna, un el El atributo es generado para usted o asignado por usted. Esto le brinda la oportunidad de adjuntar su vista a una parte existente del DOM o para crear una nueva parte de HTML que se pueda conectar al DOM.

Así es como puede adjuntar al DOM existente:

MyView = Backbone.View.extend({
  // ...
});


var existorDomel = $ ("#someElement"); nuevo myView ({el: EXISTDOMEL});

Al especificar el el Cuando instanciamos la vista, o al especificarla directamente en nuestra definición de vista, utilizamos un elemento existente.

Si omitimos el el Desde las opciones de constructor y desde la definición de vista, Backbone generará un el para nosotros. Por defecto, generará un DIV en el Cuando la vista se instancia.

Una vez que una vista tiene es el, ya sea a través de la generación o la asignación, las declaraciones de evento de la vista se delegan a través de jQuery, alcanzadas a la vista el.

Digamos que tiene el siguiente HTML:

<div id="foo">
  <button class="btnSay">Say!</button>
</div>
<div id="bare">
  <button class="btnSay">Say, Part 2!</button>
</div>

Con su vista de ejemplo, podríamos asignar una vista al foo o el bar elemento, y solo el botón dentro de ese elemento obtendría el evento de clic.

var PersonView = Backbone.View.extend({
    ....
    events : {
        "click button.btnSay" : "saySomething"
    },

    saySomething : function(){
        ....
    }
    ...
});

new PersonView({
  el: $("#foo")
});

Ahora, cuando hace clic en el botón en el foo div, obtendrás el saySomething devolución de llamada disparada. Pero porque los eventos para la vista de persona fueron alcanzados dentro del el Para esa instancia de PersonView, haga clic en el botón dentro de bar nunca disparará la devolución de llamada.