Untitled fiddle

No description

HTML

<script src="http://gianlucaguarini.com/experiments/lib/rivets.min.js"></script>
<link rel="stylesheet" href="http://gianlucaguarini.com/experiments/lib/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<h3>Try to change the data into the textarea to update the collection on the fly</h3>
<textarea class="form-control"></textarea>
<ul id="playersList">
    <!-- note that to loop the collection I had to add ":" to the team object to activate the Backbone Adapter-->
    <li rv-each-player="team:">
        <dl>
            <dt>Name: </dt><dd>{ player:name }</dd>
            <dt>Surname: </dt><dd>{ player:surname }</dd>
            <dt>Shirt Number: </dt><dd>{ player:number }</dd>
            <dd rv-if="player:captain"><b> Captain! </b></dd>
        </dl>
    </li>
</ul>

CSS

.form-control {
    float:right;
    width:50%;
    min-height:500px;
}


dt {
  float:left;
}
b {
    color:green;
}

JavaScript

/* Italian soccer team - Fifa World Cup 2006 */
var teamData = [{"number":1,"name":"Gianluigi","surname":"Buffon"},{"number":19,"name":"Gianluca","surname":"Zambrotta"},{"number":5,"name":"Fabio","surname":"Cannavaro","captain":true},{"number":22,"name":"Marco","surname":"Materazzi"},{"number":3,"name":"Fabio","surname":"Grosso"},{"number":8,"name":"Gennaro","surname":"Gattuso"},{"number":21,"name":"Andrea","surname":"Pirlo"},{"number":16,"name":"Mauro","surname":"Camoranesi"},{"number":20,"name":"Simone","surname":"Perrotta"},{"number":10,"name":"Francesco","surname":"Totti"},{"number":9,"name":"Luca","surname":"Toni"}];

// create a Rivets.js Backbone adapter
rivets.adapters[':'] = {
  subscribe: function(obj, keypath, callback) {
    if (obj instanceof Backbone.Collection) {
      obj.on('add remove reset', callback);
    }
    obj.on('change:' + keypath, callback);
  },
  unsubscribe: function(obj, keypath, callback) {
    if (obj instanceof Backbone.Collection) {
      obj.off('add remove reset', callback);
    }
    obj.off('change:' + keypath, callback);
  },
  read: function(obj, keypath) {
    return obj instanceof Backbone.Collection ? obj.models : obj.get(keypath);
  },
  publish: function(obj, keypath, value) {
    obj.set(keypath, value);
  }
};
// Set up our data
var Team = Backbone.Collection.extend(),
    italy = new Team(teamData);

// get the DOM elements
var $playersList = $('#playersList'),
    $textarea = $('textarea');

// bind our data to the DOM element
rivets.bind($playersList,{team:italy});

// write our initial dataset into the textarea
$textarea.val(JSON.stringify(teamData, false,'\t'))

// listen the textarea changes to update the collection models
$textarea.on('keyup',function(e){
    var newData = JSON.parse($textarea.val());
    // loop all the data objects into the texarea
    _.each(newData,function(data,i){
        italy.at(i).set(data);
    });
});