Welcome Guest, Not a member yet? Register   Sign In
View : full javascript or mix javascript and php
#11

[eluser]heartnetkung[/eluser]
How my solution works hmm...
Let's start with the goal for my solution.

In ajax app, javascript controls the flow of the data. You can't write code in php alone and having codes that cooperate in 2 languages is too hard to comprehend (for me). So, I decided to delegate 'templating logic' and 'stuffs-like toolbar/navigation bar' to js. Now my view files contains no php tag what so ever.

For the templating engine, here's my code. Note that it requires Mustache.js (one of the best templating engine)
Code:
/**
  * Replace data from json into html template using mustache format.
  * If you have any problem in putting mustache syntax in html try
  * putting mustache syntax in html comment; it'll work. Note: the rendering starts from innerHtml of the given element. Note2: the jquery method returns the newly created element
  * @function
  * @param {jquery} element with class hidden and template
  * @param {json} data data to be rendered
  * @return {jquery} top-most hierarchy of newly created elements (might be more than one element)
  * @example
  * <!--html code-->
  *  <div class='hidden template'>
  *   {{#students}}<span>{{index}}</span><span>{{name}}</span><iframe src='{{image-src}}'/>{{/students}}
  *  </div>
  * //js code
  * var students=[
  *  {'name':'Kirino Kousaka','img-src':'http://www.google.com/search?q=kirino&tbm=isch'},
  *  {'name':'Gokou Ruri','img-src':'http://www.google.com/search?q=kuroneko&tbm=isch'}
  * ];
  * Core.addIndexToArrayElement(Core.addIndexToArrayElement(a));
  * Core.renderTemplate($('.hidden.template'),{students:students}); or $('.hidden.template').renderTemplate({students:students}).click(function(){alert('hello')});
  */
var renderTemplate = function(templateElement, data) {
  if(!(templateElement.hasClass && (templateElement.hasClass('hidden') || templateElement.hasClass('hide')) && templateElement.hasClass('template')))
   return Core.error('rendering wrong element!');
  if(templateElement.size() > 1 || templateElement.size() === 0)
   return Core.error('This jquery must contains exactly 1 element');
  var temp;
  //remove existing rendered if any
  templateElement.prev('.rendered.template').remove();
  var templateString = ( temp = templateElement.data('saved-template')) ? temp : templateElement.html();
  if(!temp) {
   templateString = templateString.replace(/({)?{{[^'"]+}}(})?/ig, function(match) {
    return decodeURI(match);
   });
   templateElement.html('').data('saved-template', templateString);
  }
  var resultString = Mustache.render(templateString, data);
  return $(resultString).insertBefore(templateElement).addClass('rendered template');
};
Core.renderTemplate = renderTemplate;
$.fn.renderTemplate = function(data) {
  return renderTemplate(this, data)
};

Here's example of my javascript code to inject navigation bar and render some data to a table.
Code:
$(document).ready(function() {
    if(window.php && window.php.navigation_bar)
     $("body").prepend(window.php.navigation_bar);
    if(window.php && window.php.movie_list)
     Core.renderTemplate($('.hidden.template'), window.php.movie_list);
   });

Here's example of html
Code:
<div class="hidden template">
    <table class="table table-striped">
     <thead>
      <tr>
       <th>#</th>
       <th>Name</th>
       <th>Level</th>
       <th>Genre</th>
       <th>Watch Count</th>
      </tr>
     </thead>
     <tbody>
      &lt;!--{{#.}}--&gt;
      <tr class="movie-row" data-movieid="{{movie_id}}">
       <td>{{index}}</td>
       <td>{{name}}</td>
       <td>{{level}}</td>
       <td>{{genre}}</td>
       <td class="watch-count">{{watch_count}}</td>
      </tr>
      &lt;!--{{/.}}--&gt;
     </tbody>
    </table>
   </div>

One advantage of this solution is that my view files are simply plain html. It can be tested in firebug and works great in Aptana IDE. If you have any question, feel free to ask. Hope you like it ;D
#12

[eluser]vincej[/eluser]
I'm interested in this as I am on the brink of adding a bunch of JS into the site I'm building. I've already added some the 'old fashioned way' ie just calling it in the header. But they are discrete effects. I want to start sharing variables between the 2 languages for AJAX auto complete.

so I guees you are telling that these libraries make things easier. I don't want to have to learn a templating language though - I'm quite comfortable with CI / PHP.




Theme © iAndrew 2016 - Forum software by © MyBB