Jak dodać zdarzeń javascript uruchomieniowych stworzony html widżetów

Question

Zajmuję się społeczności internetowej w CakePHP i zaczął mieć wątpliwości używając jQuery dostarczyć użytecznych widgetów wokół poglądów, gdy są potrzebne.

Na przykład napisałem wtyczkę jQuery, która przeszukuje dane wewnątrz określonego tekstu wejściowego, pyta o moją bazę danych i odczytuje wyniki za pomocą zdarzeń.

Zasadniczo wtyczka jest idealna dla prostych aplikacji, ale w zasadzie jest bezużyteczna dla społeczności, w której używam jej niemal we wszystkich widokach i za każdym razem, gdy obsługuję ją różnymi zdarzeniami i metodami, dzięki ogromnym deklaracjom zdarzeń i bardzo denerwującym byciem debugowane.

I thougt rozwiązać problem za pomocą domyślne zdarzenia z widget i dodać możliwość określone dodatkowe imprezy specyficzne dla widzenia, ale w jaki sposób można to zrobić?

jest to sytuacja myślałem

zielonej części obrazu jest gdzie nie jestem pewien, gdzie należy umieścić wydarzenia domyślnych należy retrived każdym razem, gdy ich potrzebujesz? Po stwierdzeniu, że w widoku mogę dodać pewne zdarzenie do widgetu, aby było łatwiejsze w użyciu.

Dla widżetu zamierzam, aby każdy rodzaj części html był ładowany przez javascript i jest interaktywny, może to wyszukiwanie wejściowe, które pobiera listę wyników lub coś w tym stylu.

Moje pytanie brzmi: jak ustawić domyślne zdarzenia w środowisku wykonawczym do widgetu bez kopiowania i wklejania za każdym razem? Moje drugie pytanie brzmi: jak mogę dodać do nich określone zdarzenia tylko dla widoku?

Niektóre tutoriale w Internecie również byłyby miłe.

Answer 1

Moja odpowiedź wymaga backbone.js, więc nie jestem pewien, czy to ci pomoże.

Możesz oddzielić widżet na opakowanie i prawdziwy widget. Owijka może obsłużyć zdarzenia jak swoim bliskim imprezy:

var WidgetWrapper = Backbone.View.extend({ 

    tagName: 'div', 
    // This should be a mustache template: 
    template: '<a class="close" href="#">close</a><div class="content"></div>', 
    events: { 
    '.close click': 'close', 
    '.open click' : 'open' 
    }, 
    close: { 
    this.$el.hide(); 
    }, 
    open: { 
    alert('I am open'); 
    } 
    render: { 
    this.$el.html(Mustache.to_html(view.template, view.model.toJSON()); 
    } 

}); 

Prawdziwy widget mogłyby uczynić się wewnątrz widget owijarki i oba poglądy mogły wchodzić w interakcje z modelu danych (this.model).

var SpecialWidget = Backbone.View.extend({ 

    tagName: 'div', 

    // This should also be a mustache template: 
    template: '<input> <a href="#" clas="open">open</a>', 

    events: { 
    'input change': 'edit' 
    }, 

    render: function() { 
    if(!this.wrapper) { 
     this.wrapper = new WidgetWrapper(); 
    } 

    // Hand over the model to the wrapper 
    this.wrapper = this.model; 
    // Render the wrapper 
    this.wrapper.render(); 

    // Insert the widget content inside the wrapper 
    this.$el.empty().append(this.wrapper.$el); 
    this.$(".content").html(Mustache.to_html(view.template, view.model.toJSON()); 
    }, 

    edit: function() { 
    alert("Changed"); 
    }, 
}); 

To pozwoli Ci rozdzielić zdarzenia.

Można również zrobić to w drugą stronę i użyć opakowania z widokiem podrzędnym.