define(function(require) { | |
var ITEM_TEMPLATE = "<article class='item added'><h1 class='font-gamma'>{{number}}</h1><p>{{content}}</p></article>"; | |
var paragraph_list = [ | |
"Poi ch'ei posato un poco il corpo lasso, ripresi via per la piaggia diserta, sì che 'l piè fermo sempre era 'l più basso.", | |
"Ed ecco, quasi al cominciar de l'erta, una lonza leggiera e presta molto, che di pel macolato era coverta;", | |
"e non mi si partia dinanzi al volto, anzi 'mpediva tanto il mio cammino, ch'i' fui per ritornar più volte vòlto.", | |
"Temp'era dal principio del mattino, e 'l sol montava 'n sù con quelle stelle ch'eran con lui quando l'amor divino", | |
"mosse di prima quelle cose belle; sì ch'a bene sperar m'era cagione di quella fiera a la gaetta pelle" | |
]; | |
var itemCount = 7; | |
function add_post(mode) { | |
var paragraph = paragraph_list.splice(0, 1); | |
var content = ITEM_TEMPLATE.replace(/\{\{(\w+)\}\}/g, function (match, g1) { | |
switch (g1) { | |
case 'number': | |
return ++itemCount; | |
break; | |
case 'content': | |
return paragraph; | |
break; | |
} | |
}); | |
var item = document.createElement('article'); | |
salvattore[mode+'_elements'](grid, [item]); | |
item.outerHTML = content; | |
if (!paragraph_list.length) { | |
buttonBlock.classList.add('hide'); | |
} | |
} | |
function prepend_post (event) { | |
add_post('prepend'); | |
} | |
function append_post (event) { | |
add_post('append'); | |
} | |
var salvattore = require('salvattore'); | |
var grid = document.querySelector('.test-grid-b'); | |
var prependButton = document.querySelector('.post-prepend'); | |
var appendButton = document.querySelector('.post-append'); | |
var buttonBlock = document.querySelector('#js-button-block'); | |
appendButton.addEventListener('click', append_post); | |
prependButton.addEventListener('click', prepend_post); | |
}); |
This comment has been minimized.
This comment has been minimized.
richie-lbi
commented
Jan 8, 2014
I'd like to second that - appending only seems to add to the first column. Please can you Advise? |
This comment has been minimized.
This comment has been minimized.
richie-lbi
commented
Jan 9, 2014
To clarify, what i didn't find clear in an otherwise excellent plugin, was that the 2nd parameter is an array with one item [item] See line 28 on the code base to make subsequent ones appear on button click I had to push elements to the array and when i updated the salvattore method with teh new array , it would update the columns Thanks for a great plugin anyway - v useful |
This comment has been minimized.
This comment has been minimized.
Conceptualsky
commented
Apr 10, 2014
I had a weird issue with salvattore.min.js version on safari browser. Everything is working fine in other browsers with min version. When using safari and min version for some reason I got the following error: TypeError: 'undefined' is not an object (evaluating 'b[e].children.length') it was driving me crazy until I switch to the non minified version. |
This comment has been minimized.
This comment has been minimized.
cupcakedream
commented
Sep 18, 2014
Hey Everyone - I also has some trouble with this one. The code below works well to iterate over multiple elements in one event, and for me it's distributing across my columns. "response" is an html string in this case. var grid = document.querySelector('#grid');
jQuery(response).each( function(index, element) {
var item = document.createElement('article');
salvattore['append_elements'](grid, [item]);
jQuery(item).html(element);
}); |
This comment has been minimized.
This comment has been minimized.
arrowak
commented
Jul 1, 2015
For everyone who are facing the problem of dynamic elements appending to the same column (say 1st column as reported in above comments), here is what you might be doing wrong -
Here is what you should be doing -
Here is my jQuery AJAX success function - success: function(data) {
var cards = jQuery.parseJSON(data.cards);
jQuery.each(cards, function(index, value){
var item = document.createElement('div');
var grid = document.querySelector('#divDataboxWrapper');
salvattore['append_elements'](grid, [item]);
item.outerHTML = value;
});
} Thanks guys, for this awesome Library. Happy Coding. |
This comment has been minimized.
eatusc commentedDec 27, 2013
this example on the main http://salvattore.com/ page shows it appending items to different columns, when i implement similar code it only appends to 1 column, the first one, how can I change this? what's causing this issue?