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

mojitoo · 2012-05-18, 14:21

Tack så mycket dAEK, din kod fungerar bra och det var väldigt bra förklarat!

Jag har dock ett par små frågor, säg att min .comment skulle ha legat i en div som heter .side_wrapper_comment. Skulle jag då ha skrivit .side_wrapper_comment istället för body eftersom att den då skulle ha varit den närmsta föräldern? Det var åtminstone så som jag förstod din förklaring eller ska den alltid ligga i body?

Anledningen till att jag skickar in en sträng i .insert är att jag vill att koden ska fungera även om den första kommentaren inte existerar. Vilket för mig till min nästa fråga som lyder om det finns något bättre sätt att skapa denna nya div eftersom mitt sätt tydligen inte var att rekommendera?

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>

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?