Dołączanie widoków backbone.js do istniejących elementów i wstawianie el do DOM

Question

Wdrażam moją pierwszą, nie-tutorialową aplikację Backbone, i mam 2-pytające pytania dotyczące aspektu używania za pomocą metody backbone.js, która nie jest rozstrzygająca bardzo dobrze ze mną, co wiąże się z wstrzykiwaniem widoku el do DOM vs. użycie istniejącego elementu dla el. Podejrzewam, że dostarczę wam wszystkich "możliwych do nauczenia momentów" i doceniam pomoc.

Większość kręgosłupa Zobacz przykłady Widzę w Internecie określić tagName, id i/lub className, podczas tworzenia widoku, a tym samym utworzyć el, który jest odłączony od DOM. Zazwyczaj wyglądać mniej więcej tak:

App.MyView = Backbone.View.extend({ 
    tagName: 'li', 
    initialize: function() { 
    ... 
    }, 
    render: function() { 
     $(this.el).html(<render an html template>); 
     return this; 
    } 
}); 

Ale ćwiczenia nie zawsze ominąć wyjaśniając, w jaki sposób polecają uzyskanie świadczonych el do DOM. Widziałem to na kilka różnych sposobów. Moje pierwsze pytanie brzmi: gdzie jest odpowiednie miejsce na wywołanie metody renderowania widoku i wstawienie jej do DOM? (niekoniecznie jedno i to samo miejsce). Widziałem to zrobić w routerze, w funkcji inicjowania lub renderowania widoku lub po prostu w funkcji gotowego dokumentu na poziomie katalogu głównego. ($(function()). Mogę sobie wyobrazić, że któreś z tych prac działa, ale czy jest to właściwy sposób?

Po drugie, zaczynam od jakiegoś znacznika HTML/modelu szkieletowego i konwertowania części html na szablony js odpowiadające widokom szkieletu. Zamiast pozwolić, aby widok renderował nieprzyłączony element i zapewniający punkt zaczepienia w html, aby go włożyć, mam wrażenie, że jest on bardziej naturalny, gdy ma być tylko jeden element dla widoku i nie zniknie, używać istniejącego, opróżnionego elementu opakowania (często div lub span) jako samego siebie. W ten sposób nie muszę się martwić o znalezienie miejsca w dokumencie, aby wstawić mój wolné EL, które potencjalnie w końcu wygląda tak (uwaga na dodatkowe warstwowanie):

<div id="insert_the_el_in_here"> <!-- this is all that's in the original HTML doc --> 
    <div id="the_el"> <!-- i used to be a backbone generated, unattached el but have been rendered and inserted --> 
     <!-- we're finally getting to some useful stuff in here --> 
    </div> 
</div> 

więc częścią mojego drugiego pytania czy dla widoku w zasadzie statycznego jest coś złego w używaniu istniejącego elementu z kodu HTML strony bezpośrednio jako mój widok el? W ten sposób wiem, że jest już w DOM, we właściwym miejscu, a wywoływanie renderowania natychmiast wyrenderuje widok na stronie. Osiągnę to, przekazując element już istniejący do konstytutu mojego widoku jako "el". W ten sposób wydaje mi się, że nie muszę się martwić o wtrącenie go do DOM (kwestionując 1 kwestię), a wywołanie renderowania natychmiast zaktualizuje DOM. Na przykład.

<form> 
    <div someOtherStuff> 
    </div> 
    <span id="myView"> 
    </span> 
</form> 

<script type="text/template" id = "myViewContents"> . . . </script> 

<script type="application/javascript"> 
window.MyView = Backbone.View.extend({ 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      $(this.el).html(this.template()); 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView({ el: $('#myView').get(0) }); 
}); 
</script> 

Czy jest to dobry sposób na wykonanie statycznych widoków na stronie? tj. jest tylko jeden z tych poglądów i nie zniknie w żadnych okolicznościach. Czy jest jakiś lepszy sposób? Rozumiem, że mogą istnieć różne sposoby robienia rzeczy (np. W routerze, w widoku nadrzędnym, wczytywaniu strony itp.) W zależności od tego, jak korzystam z widoku, ale teraz patrzę na początkowe ładowanie strony przypadek użycia.

Dzięki

Answer 1

nie ma absolutnie nic złego w idei mocowania widok do istniejącego węzła DOM.

Możesz nawet umieścić el jako właściwość na swoim widoku.

window.MyView = Backbone.View.extend({ 
    el: '#myView', 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      this.$el.html(this.template()); // this.$el is a jQuery wrapped el var 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView(); 
}); 

Co mogę polecić, zrób to, co działa ... Piękno kręgosłupa polega na tym, że jest elastyczny i spełni Twoje potrzeby.

Jeśli chodzi o typowe wzorce, ogólnie rzecz biorąc, widzę, że mam główny widok, aby śledzić ponad widoki, a następnie widok listy i widoki poszczególnych elementów.

Innym częstym wzór miarę inicjalizacji jest zaniepokojony jest mieć jakiś obiekt App zarządzać rzeczy ...

var App = (function ($, Backbone, global) { 
    var init = function() { 
     global.myView = new myView(); 
    }; 

    return { 
     init: init 
    }; 
}(jQuery, Backbone, window)); 

$(function() { 
    App.init(); 
}); 

Tak jak mówiłem wcześniej, choć, tam naprawdę nie ma niewłaściwy sposób robienia rzeczy, po prostu rób to, co działa. :)

Zapraszam do brania mnie na twitter @ jcreamer898 jeśli potrzebujesz dodatkowej pomocy, sprawdź także @derickbailey, jest on guru BB.

Miłej zabawy!

Answer 2

Możesz również wysłać obiekt HTML DOM Element do widoku jako właściwość "el" opcji.

window.MyView = Backbone.View.extend({ 
    initialize: function() { 
      this.template = _.template($('#myViewContents').html()); 
      this.render(); 
    }, 
    render: function() { 
      this.$el.html(this.template()); // this.$el is a jQuery wrapped el var 
      return this; 
    } 
}); 
$(function() { 
    window.myView = new MyView({ 
     el: document.getElementById('myView') 
    }); 
}); 

Answer 3

Zastosowanie delegat metoda zdarzenia:

initialize: function() { 
    this.delegateEvents(); 
} 

Aby zrozumieć dlaczego: http://backbonejs.org/docs/backbone.html#section-138 w pobliżu "Set wywołania zwrotne, gdzie"

Answer 4

również wygląda w tych dniach można youse setElement.