Created
October 16, 2011 16:21
-
-
Save julienrf/1291097 to your computer and use it in GitHub Desktop.
Don’t use jQuery to write a web application
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Find each widget in the dom and configure it | |
$('.item-list-widget').each(function () { | |
var $this = $(this); | |
// Handle click on the Add button | |
$this.find('.add-item').click(function () { | |
$this.find('ul').append('<li>item</li>'); // The way you’ll create the item may be more complex than that… | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('.item-list-widget').each(function () { | |
var $this = $(this); | |
var $next = $this.find('.next'); | |
// At startup the 'next' button is disabled | |
$next.attr('disabled', 'disabled'); | |
$this.find('.add-item').click(function () { | |
$this.find('ul').append('<li>item</li>'); | |
// Enable the 'next' button if at least 3 items have been added | |
if ($this.find('ul li').length >= 3) { | |
$next.removeAttr('disabled'); | |
} | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="item-list-widget"> | |
<button class="add-item" type="button">Add</button> | |
<ul class="item-list"></ul> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="item-list-widget"> | |
<button class="add-item" type="button">Add</button> | |
<ul class="item-list"></ul> | |
<button class="next" type="button">Next</button> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Find all widgets and setup their behavior | |
var ws = document.querySelectorAll('.item-list-widget'); | |
for (var i = 0 ; i < ws.length ; i++) { | |
setup(Widget(ws[i])); | |
} | |
// Build an abstract representation of a list widget | |
function Widget(elt) { | |
return { | |
add: elt.querySelector('.add-item'), | |
next: elt.querySelector('.next'), | |
list: elt.querySelector('.item-list') | |
}; | |
} | |
// The relevant code is in this function | |
function setup(widget) { | |
// At startup the 'next' button is disabled | |
widget.next.disabled = true; | |
// Handle click on the Add button | |
widget.add.onclick = function () { | |
var item = document.createElement('li'); | |
item.textContent = 'item'; | |
widget.list.appendChild(item); | |
// Enable the 'next' button if at least 3 items have been added | |
if (widget.list.childNodes.length >= 3) { | |
widget.next.disabled = false; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment