Backbone js: Jak usunąć dodatkowy znacznik w widoku?

Question

Mam następujący szablon:

<div class="row"> 
    <div></div> 
    .... 
</div> 

i następujący pogląd:

var TestView = Backbone.View.extend({ 
    tagName: "div", 
    template: $("#tests_template"), 
    initialize: function() { 
     _.bindAll(this, 'clickbtn'); 
    }, 
    events: 
    { 
     "click .btn": "clickbtn" 
    }, 
    render: function() { 
      .... 
      { 
     }); 

Problem polega na tym, że wytwarza się następujące dane wyjściowe:

<div><div class="row">...</div></div> 

Jak mogę pozbyć zewnętrzny div? Próbowałem usunąć właściwość tagName z widoku, ale nadal umieszcza div?

Answer 1

Zmień szablon pozbyć zewnętrznej div:

<div></div> 
    .... 

Następnie powiedzieć widok, aby utworzyć div z nazwą klasy:

tagName: "div", 
className: "row" 

LUB jeśli chcesz zachowaj bieżący szablon, a następnie powiedz Viewowi, którego użyć (jeśli jest już jakieś miejsce na twojej stronie):

var testView = new TestView({el: $(".row")}); 

EDIT Zapytałeś, czy możesz to zrobić w inicjalizatorze? Jasne, ale trzeba by upewnić się, że hak zdarzenia:

initialize: function() { 
    this.el = $(".row"); 
    this.delegateEvents(); 
    _.bindAll(this, 'clickbtn'); 
} 

Szczerze, choć dwie pierwsze opcje są de-coupled IMO.

Answer 2

Innym rozwiązaniem, które nie wymaga modyfikacji szablonu jest użycie setElement

setElement view.setElement (element)

Jeśli chcesz ubiegać się widok Backbone do innego DOM element, użyj setElement, który utworzy buforowane referencje $ el i przeniesie delegowane zdarzenia widoku ze starego elementu do nowego.

Pozwoli to całkowicie obejść tagName. Możesz opuścić tagName z definicji widoku (domyślnie div to any). Nie musisz też martwić się ręcznym delegowaniem zdarzeń lub wymaganiem wcześniejszego wybrania elementu, o którym mowa w odpowiedzi @Brian Genisio, chociaż te inne metody też będą działać.

render: function() { 
    this.setElement(this.template(this.model.toJSON())); 
    return this; 
}