Backbone + JQuery Plugin funktioniert nicht (Geschrieben in CoffeeScript) - jquery, jquery-mobile, backbone.js, coffeescript

Ok, ich habe ein einfaches JQuery-Plugin, das, wenn es auf ein Div angewendet wird, alle Bilder innerhalb dieses Div mit einem Preloader-Bild sauber lädt. Das funktioniert gut.

In Backbone füge ich jedoch Daten von JSON an ein Element an, nachdem die Seite geladen wurde. Daher wird der folgende Code nicht funktionieren.

$(document).ready( ->
$("#theList").preloader()
)

Also muss ich "$ (" # theList "). Preloader ()" in meine Renderfunktion einfügen, nachdem meine Liste generiert wurde.

class HomeView extends Backbone.View
constructor: ->
super

initialize: ->
@isLoading = false

events: {
"click #nextPage": "nextPage"
"click #prevPage": "prevPage"
}


template: _.template($("#home").html())
theListTemplate: _.template($("#theList").html())

render: ->
$(@el).append(@template)
@loadResults()
$("#theList").preloader() #<----------------- DOESN"T WORK NOW


loadResults: () ->
@isLoading = true

Properties.fetch({
success: (data) =>

#Append properties to list
$("#theList").append(@theListTemplate({data: data.models, _:_})).listview("refresh")


error: ->
@isLoading = false
alert("Unable to load information")
})

Aber jetzt ist die Codezeile in einer Backbone-Ansicht / einem Modell / Controller oder was auch immer, es funktioniert nicht ..

Als Referenz lade ich meine Anwendung so ..

$(document).ready( ->
console.log("document ready")
app.AppRouter = new AppRouter()
Backbone.history.start()
)

Jede Hilfe würde sehr geschätzt werden! Vielen Dank.

Antworten:

2 für die Antwort № 1

Angenommen, der Preloader soll nicht auf den Knoten arbeiten, die in der loadResults#fetch#success (Da der Abruf zu dem Zeitpunkt, zu dem Sie den Preloader aufrufen, nicht zurückgekehrt ist), vermute ich, dass das Problem darin besteht, dass während der Ausführung des render() Funktion, die Ansicht "s el ist noch nicht Teil des DOM.

Wenn Sie aufrufen HomeView mögen

myHomeView = new HomeView()
$("some selector").append(myHomeView.render().el)

Das HomeView-Element wurde dem DOM noch nicht hinzugefügt. Es ist ein eigenständiges Dokument.

Daher der jQuery-Selektor $("#theList") gibt ein leeres Ergebnis zurück - seit der Suche in derDOM. Dies kann einfach durch console.log "im Ergebnis dieses Selektors überprüft werden oder durch das Setzen eines Breakpoints bei der Verwendung eines Debuggers und das Testen mithilfe der Konsole.

Zum Glück ist die Lösung einfach. Sie müssen auf das abgelöste Dokument verweisen, indem Sie den Selektor mit der Option auf die Ansicht festlegen Die jQuery-Referenz ist auf die Ansicht beschränkt:

@$("#theList").preloader()

oder indem du es selbst machst

$(@el).find("#theList").preloader()

---