<button id="send">
) and then attach all event handlers after view rendering (e.g. document.getElementById('send')
). Remember to have unique IDs.
createElement
, and then with the DOM Node you just have to set onClick
or append an event listener. The idea of the IDs is not very practical in my opinion... somehow you have to keep track of the IDs and then attach the handlers. Looks like more work and not so clean information workflow (normally you would like to append the handlers when creating the code for the view). I have found the minimalistic library hyperscript
quite nice, and the virtual-bom
library is based upon this, which makes easier moving from raw re-rendering to a virtual dom approach.
<input id="username" type="text" value="username">
<input id="password" type="password" value="password">
<button class="button" id="login">Login</button>
$('#login').click(function() {
var view = document.getElementById("view") ;
var session = $.post( "https://www.nomvc.com/actions/v1/logmein", { username: $( "#username" ).val(), password:$( "#password" ).val() } ) ;
session
.done(function( model ) {
view.innerHTML = state.render(model) ;})
.fail( function(data) {
view.innerHTML = state.render({error: "server error"}) ; })
}) ;
innerHTML
and then once rendered, you iterate again through the model so that you know some IDs, fetch DOM elements by ID, and then append handlers. I really would not do that. It looks way easier just to generate the DOM nodes with createElement
calls, bind the events, and return the DOM object instead of a string. Anyway, as you have commented, this is not an architecture issue...
So first how we put mount all the components inside f():
+ theme.sliders(home.sliders)
+ theme.actors(home.bio)
+ theme.clearFix()
+ theme.actors(home.films)
+ theme.clearFix()
+ theme.trailer(home.trailer)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfo)
+ theme.clearFix()
+ theme.trailer(home.trailerReel)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfoReel)
+ theme.clearFix()
+ theme.trailer(home.trailerCalBalloons)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfoCalBalloons)
+ theme.clearFix()
+ theme.trailer(home.trailerTheatre)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfoTheatre)
+ theme.clearFix()
+ theme.trailer(home.trailerOmbre)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfoOmbre)
+ theme.clearFix()
+ theme.trailer(home.trailerOntherun)
+ theme.clearFix()
+ theme.trailerInfo(home.trailerInfoOntherun)
+ theme.clearFix()
+ theme.callToAction(home.callToAction)
+ theme.clearFix()
+ theme.gallery(home.gallery)
+ theme.clearFix()
+ theme.contact(home.contact)
+ theme.clearFix()
each component of course being a pure function
theme.actors = function(a) {
a = a || {} ;
a.id = a.id || 'actors' ;
a.title = a.title || 'TITLE' ;
a.title2 = a.title2 || 'TITLE2' ;
a.title3 = a.title3 || 'TITLE3' ;
a.title1 = a.title1 || 'TITLE1' ;
a.p1 = a.p1 || 'SUMMARY1' ;
a.p2 = a.p2 || ' ' ;
a.p3 = a.p3 || ' ' ;
a.background = a.background || 'html/img/background/5.jpg' ;
a.actors = a.actors || [{}] ;
if (a.actors.length>3) {
a.background = 'html/img/background/5b.jpg' ;
}
var actors = '' ;
if (a.actors.length>0) {
actors = a.actors.map(function(actor){
actor = actor || {} ;
actor.name = actor.name || 'NAME' ;
actor.surname = actor.surname || 'SURNAME' ;
actor.img1 = actor.img1 || 'html/img/actor/3.jpg' ;
actor.img2 = actor.img2 || 'html/img/actor/hover/3.jpg' ;
var img2 = '' ;
if (actor.img2 !== undefined) {
img2 = '<img class="before" src="'+actor.img2+'" alt="actor">\n' ;
}
...
return ('<!-- ACTORS -->\n\
<section id="'+a.id+'">\n\
<div class="center">\n\
<!-- title -->\n\
<h2 class="title">'+theme.localize(a.title)+'</h2>\n\
<!-- actors -->\n\