test.js

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);
});

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.

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);
});

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 -

• You might be using all the elements together as the item variable value.
• Doing so, salvattore thinks that whole item variable is one single element and it goes ahead and appends to one single column.

Here is what you should be doing -

• Return json encoded array of elements from the server as the ajax json response.
• In the success function of the jQuery ajax, parseJSON the encoded json array (which will convert the json string back to JS array)
• Loop through each element in the JS array using jQuery.each();
• Inside the loop, do the salvattore append/prepend stuff.

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.