jeudi 29 octobre 2015

CLNDR.js templating with VUE.js or Laravel Blade

Is it possible to template clndr.js using vue.js or laravel blade? Currently the example uses underscore.js as follows:

<div id="mini-clndr"></div>

 <script id="calendar-template" type="text/template">
  <div class="controls">
    <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %></div><div class="clndr-next-button">&rsaquo;</div>
  </div>

  <div class="days-container">
    <div class="days">
      <div class="headers">
        <% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %>
      </div>
      <% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %>
    </div>
  </div>
 </script>

The javascript code:

$('#mini-clndr').clndr({
  template: $('#calendar-template').html(),
  adjacentDaysChangeMonth: true 
});   

The closest I've come across is an example using angular.js

I'd class myself a beginner at using vue.js. Are there any vue.js or laravel blade experts who can guide me on how to template clndr.js using vue.js or blade? Some snippets of code would be helpful to get me started.

I'm struggling on how I'd render the template. The clndr.js documentation give an example as follows:

var precompiledTemplate = myRenderingEngine.template( $('#my-template').html() );

$('#my-calendar').clndr({
  render: function(data) {
    return precompiledTemplate(data);
  }
});

How can you do this in vue.js or laravel blade? Any suggestions would help.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire