jQuery, Event Binding, gör jag rätt?

dAEk · 2012-05-18, 15:40

Aha, ser nu att jag var lite otydlig i det där med föräldernoden. När man använder delegates vill man sätta lyssnaren på ett element som alltid finns där. Den första noden som inte tas bort med javascript kan vara ett bra resonemang.

I ditt första exempel ser strukturen ut såhär:

Kod:

-html
|--body
|----.comment_wrapper
|-------.comment

När en ny kommentar läggs till blir trädet:

Kod:

-html
|--body
|----.comment_wrapper
|-------.comment
|----.comment_wrapper
|-------.comment

och då kan man se att det inte skulle funka att sätta delegaten på .comment_wrapper eftersom man då behöver binda eventen på samma mindre effektiva sätt som jag beskrev ovan. Närmsta förälder som inte påverkas när nya kommentarer infogas är i det här fallet body men om alla kommentarer omsluts av ett annat element blir strukturen:

Kod:

-html
|--body
|----.side_wrapper_comment
|-------.comment_wrapper
|----------.comment
|-------.comment_wrapper
|----------.comment

eller som jag skrev tidigare med #comments:

Kod:

-html
|--body
|----#comments
|-------.comment_wrapper
|----------.comment
|-------.comment_wrapper
|----------.comment

och då sätter man delegaten på .side_wrapper_comment eller på #comments. Hoppas att det blev lite tydligare nu.

Ang. den andra frågan: jo, det finns bättre sätt. Det finns olika templatebibliotek som gör livet enklare men jag brukar trots det föredra att göra det för hand.
När man gör jobbet själv innebär det i kort att man ser till att det alltid finns en mall/template i Html-koden. När man sedan behöver infoga nya poster med Javascript tar man en kopia på mallen, klonar den, lägger in nytt innehåll och infogar den.

I ditt fall skulle $(".insert")-klickfunktionen skrivas om till följande:

Kod:

$('.insert').on('click', function(e) { 
	e.preventDefault(); 
	console.log('insert'); 

	var template = $(".side_wrapper_comment").find(".template").first();
	var clone = template.clone();
	$(this).before(clone); 
});

Och Html-koden:

Kod:

<html>
[...]
<body> 
	<div class="side_wrapper_comment">
		<div class="comment_wrapper"> 
			<a href="#" class="comment">Write your comment</a> 
		</div> 
		
		<p> 
			<a href="#" class="insert">Insert New Object</a> 
		</p> 
	</div>
</body> 
</html>

Om vi tänker oss att vi vill hämta nya kommentarer från servern eller liknande skulle vi kunna infoga dessa på detta ganska fiffiga sätt:

Kod:

$(".reload").on("click", function(e) {
	e.preventDefault();
	console.log("hämtar kommentarer..."); 
	
	reloadComments();
});

function reloadComments() {
	var comments = getCommentsFromServerOrWhatever(); //returnerar en array av kommentarer
	var template = $("#comments").find(".template").clone();
	
	$.each(comments, function(i, comment) {
		var newComment = template.clone();
		newComment.find(".text").html(comment.Text);
		newComment.find(".author").html(comment.Author);
		newComment.find(".time").html(comment.PostedAt);
		newComment.removeClass("template");
		
		$("#comments").append(newComment);
		newComment.show();
	});
}

Html-markuppen för detta scenario:

Kod:

<body> 
	<div class="side_wrapper_comment">
		<div id="comments">
			<div class="comment_wrapper template"> 
				<div class="text"></div>
				<span class="author"></span>
				<span class="time"></span>
			</div>
		</div>
		<p> 
			<a href="#" class="reload">Ladda om kommentarerna</a> 
		</p> 
	</div>
</body>

Ämnesverktyg
Visa utskriftsvänlig version E-posta den här sidan
Visningsalternativ
Växla till linjär visning Växla till hybrid-visning Trådad visning

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

jQuery, Event Binding, gör jag rätt?