Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

Javascript Templating Engine
Goto page 1, 2  Next
 
Post new topic   Reply to topic    Smarty Forum Index -> Smarty Development
View previous topic :: View next topic  
Author Message
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Tue Dec 04, 2007 9:04 am    Post subject: Javascript Templating Engine Reply with quote

Hi,

Been doing a little Firefox extension development and was interested in whether there were any Smarty-like templating engines... I came across http://code.google.com/p/trimpath/wiki/JavaScriptTemplates and http://swik.net/SWATO/Swato+JavaScript+Template and thought it would be cool to see the exact same syntax adapted... I've got my hands tied now, but has anyone else given this thought?

Brett
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Fri Feb 15, 2008 11:05 pm    Post subject: Reply with quote

There's one called JSmarty.

But I have found that it is barely usable... which is a real pity... :'(

I am also extremely interested in a smarty javascript implementation.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Fri Feb 15, 2008 11:06 pm    Post subject: Reply with quote

Here's the link: http://code.google.com/p/jsmarty/
Back to top
View user's profile Send private message Send e-mail Visit poster's website
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Sat Feb 16, 2008 1:33 am    Post subject: Reply with quote

Wow, that one you sent is so much farther along, has recent contributions (did you try working with the latest feb 3. release?), and indeed looks patterned exactly on Smarty, as far as syntax.

The samples mostly seemed to work. What kind of problems did you have with it?
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Sat Feb 16, 2008 2:16 am    Post subject: Reply with quote

http://www.balupton.com/sandbox/templates/ download the .zip and try getting Level 6 to work...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Sat Feb 16, 2008 6:33 pm    Post subject: Reply with quote

Just a small bug in level 6's index.html .... There is no Smarty "isset"; while this project is quite ambitious, it doesn't reimplement all PHP functions (though that would sure be cool)! Just omit isset and rely on just !$page which has the same effect here.

From what I can tell, this code looks pretty prime time...

best wishes,
Brett
Back to top
View user's profile Send private message
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Sat Feb 16, 2008 6:50 pm    Post subject: Reply with quote

Maybe I spoke too soon about it being ready for prime time (which is not to say it might still be quite useful).

1) Noticed a problem parsing a space after the parentheses in {if !($results) }.
2) In a limited amount of tries, I didn't see how to get {assign} to work, and even the sample page had problems with it
3) html_checkboxes and perhaps some others didn't seem to work, including in the samples.

It does seem like there are some bugs to work out, but this is extremely promising and exciting, from my perspective...

But since this is off topic, let's submit any bug reports to that site instead! Go to Issues... (whoops, just saw you already did)

Brett
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Sat Feb 16, 2008 11:18 pm    Post subject: Reply with quote

I've spent the past day creating my own, you can see it here:
http://www.balupton.com/sandbox/jquery_smarty/index.xhtml

Should have it fully functional in a month, as well as having it open up to plugins. Also in talks with the developer of JSmarty, so should be able to help each other out.


Regarding the isset:
http://www.smarty.net/manual/en/language.function.if.php
Code:
{* check for not null. *}
{if isset($foo) }
   .....
{/if}
Back to top
View user's profile Send private message Send e-mail Visit poster's website
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Tue Apr 29, 2008 5:24 am    Post subject: Reply with quote

Any updates balupton? I wasn't clear from your "roadmap" at the bottom of http://www.balupton.com/sandbox/jquery_smarty/ whether those to-dos were still current, what they meant exactly, and what remained to be done to reflect Smarty's behavior?

thanks very much,
Brett
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Tue Apr 29, 2008 11:18 am    Post subject: Reply with quote

brettz9 wrote:
Any updates balupton? I wasn't clear from your "roadmap" at the bottom of http://www.balupton.com/sandbox/jquery_smarty/ whether those to-dos were still current, what they meant exactly, and what remained to be done to reflect Smarty's behavior?

thanks very much,
Brett


Yeah the todo list is always current. It should be more or less usable right now, as you an see by what it already supports. One very important feature is the auto_update and onchange support which you can see in the misc section.

I am still working on it here and there. Are there any features that aren't done that you require?
Back to top
View user's profile Send private message Send e-mail Visit poster's website
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Wed Apr 30, 2008 9:37 am    Post subject: Reply with quote

I haven't really tried it yet, as I'd rather wait until the essentials are done before getting stuck and realizing I have to do a lot of work to make it work. Smile

But it looks great, and I see you're using the JavaScript PHP functions already out there (I modified one below too) for some of the work.

I guess I'd mostly like to see things like "section" and the core features (besides things like caching) working sooner than the easier to add modifiers, etc.

To put in my own very small contribution, here are a few simple modifiers (mostly based on Smarty's own regexp). Note for "nl2br", I did not copy the same function as that developed for the JavaScript equivalent for PHP project, since it made an exception for a tag/gt sign, which is not an exception present in PHP (or Smarty).

Code:
function lower (str) {
   return str.toLowerCase();
}
function nl2br (str) {
   return str.replace(/\n/g, '<br />');
}

function strip_tags (str, replace_w_space) {
   var pattern = /<[^>]*?>/g;
   if (replace_w_space !== false) { // default is true
      return str.replace(pattern, ' ');
   }
   return str.replace(pattern, '');
}
function upper (str) {
   return str.toUpperCase();
}
function wordwrap( str, int_width, str_break, cut ) {
   // Wraps a string to a given number of characters
   //
   // +   discuss at: http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_wordwrap/
   // +      based on version: 803.1715
   // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
   // +   improved by: Nick Callen
   // +   modified for Smarty by: Brett Zamir
   // *    example 1: wordwrap('Kevin van Zonneveld', 6, '|', true);
   // *    returns 1: 'Kevin |van Zo|nnevel|d'

   int_width = (int_width == undefined) ? 80 : int_width;
   str_break = (str_break == undefined) ? '\n' : str_break;

   var i, j, s, r = str.split('\n');
   if(int_width > 0) for(i in r){
      for(s = r[i], r[i] = ''; s.length > int_width;
         j = cut ? int_width : (j = s.substr(0, int_width).match(/\S*$/)).input.length - j[0].length || int_width,
         r[i] += s.substr(0, j) + ((s = s.substr(j)).length ? str_break : '')
      );
      r[i] += s;
   }
   return r.join("\n");
}


Edited to remove count functions I see now that you already had added (I should have checked the code, but I hadn't seen the functions in the test page.)
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Sat May 17, 2008 9:54 pm    Post subject: Reply with quote

Great thanks for that.

I'm pretty caught up with University for another month, but after that, I will be working on this on a weekly/fortnightly basis.

How are you planning to use JQSmarty, and what direction would you like it go in? As here is my plan:
- When using with SmartyPHP, it will receive SmartyPHP's data, and use that. From then on, it will scan the page for all links and forms containing "jqsmarty-compatible" and rewrite them so that they become a AJAX request to a data interface which returns the updated Smarty data, and then using the auto_update and onchange features, the frontend will be updated automatically.
- When using with Aptana Jaxer (serverside javascript), it will run both server and client side, and somehow communicate the data between each other.


Although, I have a concern. For using JQSmarty in a big project as a complete front end system (as will be my expectations), there will need to be a way to stop sensitive data reaching $.Smarty.data, eg. like user passwords...

This also applies to Jaxer installations of it, as if $.Smarty.data is planned to be shared among server and client sides, then again, there needs to be a way for sensitive data not be reached by the client...

What are your thoughts on this? Any ideas?

I'm thinking that it can be handled via the DataBase Interface, so for the password field, a sensitive flag is set. And then when we are passing things to smarty, there is a toSmarty() function that returns the Object's row without the sensitive data, so used like so:
$Smarty->assign('current_User', $current_User->toSmarty());
Alternatively, Smarty could be modified so that when it is assigned a Object it triggers the toSmarty function, so we can just do:
$Smarty->assign('current_User', $current_User);
Back to top
View user's profile Send private message Send e-mail Visit poster's website
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Sun May 18, 2008 2:04 am    Post subject: Reply with quote

Hi,

As much as I hope that server-side JavaScript uses take off even further, and as useful as I know server-side PHP can be with client-side JavaScript, my own interest for now is mostly with full client-side applications, whether just a JavaScript-HTML app or Mozilla/Firefox extension (Mozilla's own templating system, seems from my understanding of it, to be overly complex and less flexible than a Smarty-like system).

So my hope would be that it could at least work in such a context without any server-side considerations. As far as your questions, I guess I'd need to see some examples.

Given the ongoing nature of a JS app, I suppose an important thing to work out (if you haven't already) would be some kind of hooks to find a given template, through calls to fetch() + DOM's appendChild() or fetch()+innerHTML (or something like "DOMBuilder" (intro) instead of innerHTML), or display() (see below), which referenced templates to be loaded via Ajax or by element id retrieval (such as that in an XML island, etc.), perhaps allowing a DOM node instead of a filename to be specified for template retrieval. It'd be nice if fetch() could either output as a string or DOM node somehow.

In the case of display(), I suppose since document.write would be less than ideal, the replacement of everything within a special id (or within <body>) would be necessary, though if the former, one is faced with the decision of whether to depend on some fixed ID (e.g., 'jqsmarty-display-section') or, better yet, by using the equivalent of a custom Template Resource (e.g., display('jqsmarty:someDisplayID'). The latter might also come in handy with fetch() too.

Maybe PHPTAL could also offer some interesting ideas too (another project!).

It's exciting to see tools like JSUnit, debugger/profilers, and JQSmarty make work on larger applications become feasible in JS (just discovered JSONPath). Best of luck!

best wishes,
Brett
Back to top
View user's profile Send private message
brettz9
Smarty Regular


Joined: 07 Jul 2006
Posts: 93

PostPosted: Sun May 18, 2008 2:31 am    Post subject: Reply with quote

In addition to my last post just now, I might add boots' SmartyDoc or my own spin-off SmartyDocB (intro or docs) which allow one to shuffle off certain blocks of content to different places within the document, or even outside of the document. For example, one might have some CSS styles added to an individual template, yet have them be auto-incorporated into an external file and then retrieved in the future from that file instead (allows both bird's-eye view and control with compartmentalization).
Back to top
View user's profile Send private message
balupton
Smarty Rookie


Joined: 15 Feb 2008
Posts: 11
Location: Perth, Australia

PostPosted: Sun May 18, 2008 10:23 pm    Post subject: Reply with quote

Thanks for quick reply Smile

Have you taken a look at the onchange and auto_update functionality already implemented in JQSmarty, as I believe that is what you are after.

So within the demo page there is:
Code:
               <strong>auto_update:</strong><br />
                  {$title|default:"No title, so expect the rest to be blank as well..."|capitalize|auto_update}<br />
                  {$title|capitalize|auto_update::"div":"auto_update"}<br />
                  {$title|capitalize|auto_update:"title_span"}<br />
                  <span class="auto_update_manual">{$title|capitalize|auto_update:"div.content.smarty > span.auto_update_manual"}</span><br />
                  <br />


Now, if you notice on the last element, we use a jQuery selector, which is quite a nifty thing.

Now later on there is also the onchange, so we can update the document.head.title value:
Code:
// Add onchange hanlders
         $.Smarty.onchange('title', function(old_value, new_value){
            $('html > head > title').html(document.title = new_value);
            alert('Title has changed from ['+old_value+'] to ['+new_value+']');
         });



Now, the next step I plan to add is a auto_update function, such that you can do:
Code:
{auto_update var="title" onchange="$.myApp.onchange_title"}
and
{auto_update var="title" element="document > head > title"}




Now for the sensitive data problem I brought up, here is an example of when it would apply:
Code:
<?php
$User = array('id'=>5, 'username'=>'Bob', 'password' => 'pass');
$Smarty->assign('current_User', $User);

Now if that makes it to smarty, someone could do the following:
Code:
alert($.Smarty.data.current_User.password);

Which is bad.

One method I will be experimenting with in the next few months is passing Objects over to Smarty's assign, and then converting via a toSmarty function. So within the Smarty assign function there will be something like:
Code:
if ( is_object($value) && function_exists(array('toSmarty', $value)) )
$value = $value->toSmarty();

So then the toSmarty function will be aware of the sensitive data, and remove them to what is passed to smarty. So Smile all round.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> Smarty Development All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP