clean previus data and add new data

[Eyal Berman]

<span id="dd">Get</span>

  <ul id='la' style="display:none;">

    <li>

      <a></a>

    </li>

  </ul>

 

  <script>

    var data = {

      animals:[

        {name: 'mouse',url: 'http://www.google.com'},

        {name: 'cat'},

        {name: 'bird'},

        {name: 'dog'}

      ]

    };

    var directive = {

      'li':{

        'animal<-animals':{ //for each entry in animales name the element 'animal'

          'a': 'animal.name', //the dot selector, means the current node (here a LI)

 'a@href':'animal.url',

 '@data-url':'animal.url'

        }

      }

    };

$("#dd").click(function(){

data.animals.push({name:"snake",url:"www.catom.com"});

$( '#la' ).show()

//$('#la').find("li").remove();

$( '#la' ).render( data, directive );

});

  </script>

if i press twice on get it will render more items,

i want to clear the template before i put the new data (assuming that the data is changing)

[Mic (BeeBole)]

Hi Eyal,

If you want to run multiple renders, you need to compile the template first and reuse it this way:

 var directive = {
 'li':{
  'animal<-animals':{ //for each entry in animales name the element 'animal'

 'a': 'animal.name', //the dot selector, means the current node (here a LI)
 'a@href':'animal.url',
 '@data-url':'animal.url'
 }
 }

 },
 //compile the template
 compiled = $( '#la' ).compile( directive );

 $("#dd").click(function(){
   data.animals.push({name:"snake",url:"www.catom.com"});

   $( '#la' ).render( data, compiled ).show();//note the use of compiled instead of directive here
 });