Markuper: The Opera Unite Service template library

Markuper: The Opera Unite Service template library

This article introduces Markuper, a templating library that allows rapid development of Opera Unite applciations and binding of data from JavaScript straight into the HTML templates.

( Read the article )

An error in the article: in the section "Using JavaScript variables in the Template", the template has the "name" field set to "Template". However, the output shows the corresponding substitution to be "Markuper".

"It also violates abstraction layers, between logic and separation"...shouldn't that read "presentation" and not "separation"??

Some anchors are linked to http://ops/svn/proj/alien/documentation/api-ref/

Hello,

I've read this article and I have some questions... First of all, none of the example codes seem to be accessible, I only get 404 errors, why is that? Also, I tried to use the Markuper function, but my webpage just keeps loading without any error message (no firewall problem, and the issue is both on Linux and Windows). To see my source code : http://web2master.com/unite/test.zip

Am I doing something wrong?

Thanks,


Brian

It seems that in a template, we have to write something like {{data.name}} instead of {{name}}.
If I'm right, there are a few things to correct within the article.

Originally posted by ZeBrian:

I tried to use the Markuper function, but my webpage just keeps loading without any error message (no firewall problem, and the issue is both on Linux and Windows). To see my source code : http://web2master.com/unite/test.zip

Am I doing something wrong?

Thanks,


Brian

Hi Brian,

First of all, thanks for your feedback.
I took at look at your code and what's missing is the inclusion of the template library itself with

<script src="script/template.js"></script>

on the index.html if you put the template.js in the script/ directory.
However you should have seen this error message (as I saw when I tested your code):

message: Statement on line 16: Undefined variable: Markuper

Originally posted by Akbalder:

It seems that in a template, we have to write something like {{data.name}} instead of {{name}}.
If I'm right, there are a few things to correct within the article.

All variables given on the Markuper contructor are accessible without a "namespace" i.e. {{name}} instead of {{data.name}}.
But the object given to the parse() function will be "plugged" under the data namespace, making you having to prefix your variable accesses with a data. namespace.
Example:

var tmpl = new Markuper( 'template.html', {name1: 'value1'} );
tmpl.parse( {name2: 'value2'} );

In template.html you'll have to use {{name1}} and {{data.name2}} to access those variables given in the constructor and parse() function respectively.

Thanks for your answer.
Using a different namespace depending on the way we call the template is a bit strange !
Is there a reason for that ?

Originally posted by Akbalder:

Thanks for your answer.
Using a different namespace depending on the way we call the template is a bit strange !
Is there a reason for that ?

It's not how you call the template, it's on creation and on parsing.
I wanted to be able to parse the document using different data while maintaing some "global" data.
The one you give on construction is the root one and the most important, you probably only want to use that.
The different namespace might be useful if you want to give the template to a third party like we do in Yusef and don't want any name clashing.

Originally posted by antonioafonso:

Originally posted by ZeBrian:

I tried to use the Markuper function, but my webpage just keeps loading without any error message (no firewall problem, and the issue is both on Linux and Windows). To see my source code : http://web2master.com/unite/test.zip

Am I doing something wrong?

Thanks,


Brian

Hi Brian,

First of all, thanks for your feedback.
I took at look at your code and what's missing is the inclusion of the template library itself with

<script src="script/template.js"></script>

on the index.html if you put the template.js in the script/ directory.
However you should have seen this error message (as I saw when I tested your code):

message: Statement on line 16: Undefined variable: Markuper

Thanks for your answer, you were right I thought this was a built-in library which comes with the File I/O API. Maybe a direct link to template.js from the article would make it even clearer?

Thanks for your time!

I tried to nest data-lists.
It doesn't seem to function.
Is it possible ?

<p data-list="peoples">
  {{peoples[].name}}
  <ul>
    <li data-list="peoples[].phones">
      {{peoples[].phones[].desc}} : {{peoples[].phones[].value}}
    </li>
  </ul>
</p>

Originally posted by Akbalder:

I tried to nest data-lists.
It doesn't seem to function.
Is it possible ?

  {{peoples[].name}}
  

    
      {{peoples[].phones[].desc}} : {{peoples[].phones[].value}}
    
  

It should work, I'll give it a look.

Originally posted by Akbalder:

I tried to nest data-lists.
It doesn't seem to function.
Is it possible ?

  {{peoples[].name}}
  

    
      {{peoples[].phones[].desc}} : {{peoples[].phones[].value}}
    
  

Of course, I didn't notice at the time, you have a block element (<ul>) inside a paragraph (<p>) which is not allowed by the HTML spec:

Originally posted by http://www.w3.org/TR/html401/struct/text.html#h-9.3.1:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Is it possible to address to variables in the following way?

{{foo[0].bar}}

Originally posted by itanka:

Is it possible to address to variables in the following way?

{{foo[0].bar}}

Hi, not yet, in the near future.

Seems to be an error on line 319 (in the version that I downloaded just now):

            return argument.callee( data[keys[0]], keys.slice(1).join('.') );

should be

            return arguments.callee( data[keys[0]], keys.slice(1).join('.') );

Originally posted by lucideer:

Seems to be an error on line 319 (in the version that I downloaded just now):

            return argument.callee( data[keys[0]], keys.slice(1).join('.') );

should be

            return arguments.callee( data[keys[0]], keys.slice(1).join('.') );

wow, you're absolutely right, I'm amazed no one noticed it before :|
That is a very old version of Markuper btw, we haven't had the time to update the documentation for the latest revisions, I'm sorry

Originally posted by antonioafonso:

That is a very old version of Markuper btw, we haven't had the time to update the documentation for the latest revisions, I'm sorry

Any chance we could get the latest version sans-documentation anyway?

Originally posted by lucideer:

Any chance we could get the latest version sans-documentation anyway?

Well, you can get it from the latest services on unite.opera.com

Originally posted by antonioafonso:

Well, you can get it from the latest services on unite.opera.com

Thank you. I'll try it later on - any chance of a brief informal changelog?

Originally posted by lucideer:

Originally posted by antonioafonso:

Well, you can get it from the latest services on unite.opera.com

Thank you. I'll try it later on - any chance of a brief informal changelog?

If memory serves me right they were mostly bugfixing, but the new features that I have here on the timeline are:

* ternary operation like: {{expr ? true [: false]}}
* hability to add data- attributes with wildcards like data-*-attribute (meaning that when you register a data attribute using this string every attribute with this name scheme - data-<something>-attribute - will make the callback be called)
* data-*-attribute to create attributes <p data-style-attribute="key"> will create the style attribute with the contents of key, if key is undefined the attribute will not be created so you can do stuff like data-class-attribute="key ? className" that wil add class="<className>" if there is such a key.

I hope this can answer your question.

Thanks.

I found a bug.

var template = new Markuper('templates/index.html', {});
e.connection.response.write( template.parse().html() );
e.connection.response.close();

templates/index.html:

Hi {{username}}

Output will be "Hi {{username}}" because variable username not passed to template.

I think it's wrong. User should never see template variables such as {{username}}. I've fixed it:

975a976
>                     node.textContent = node.textContent.replace(/{{.*}}/, '');

Hi,

Thank you for your comment.
It's actually a feature {{key}}'s that turn out to be non-existent are not parsed on purpose.
I guess I'll add a parameter to parse() where you can specify that as an option!

Originally posted by ELV1S:

I found a bug.

var template = new Markuper('templates/index.html', {});
e.connection.response.write( template.parse().html() );
e.connection.response.close();

templates/index.html:

Hi {{username}}

Output will be "Hi {{username}}" because variable username not passed to template.

I think it's wrong. User should never see template variables such as {{username}}. I've fixed it:

975a976
>                     node.textContent = node.textContent.replace(/{{.*}}/, '');

antonioafonso
Could you put Markuper to some public repository such as github or bitbucket?

I don't see progress on this library. http://dev.opera.com/libraries/markuper/markuper.js has version 0.3, but latest fileSharing.ua bundled with template.js version 0.5. What changed? Why this link http://dev.opera.com/libraries/markuper/markuper.js not updated?

Originally posted by ELV1S:

antonioafonso
Could you put Markuper to some public repository such as github or bitbucket?

Maybe in the future , but not for now no..

Originally posted by ELV1S:

I don't see progress on this library. http://dev.opera.com/libraries/markuper/markuper.js has version 0.3, but latest fileSharing.ua bundled with template.js version 0.5. What changed? Why this link http://dev.opera.com/libraries/markuper/markuper.js not updated?

Yeah, there were quite some changes, those documents will be updated very soon.

var template = new Markuper('template.html', {is_checked: 'checked'});
e.connection.response.write( template.parse().html() );

template.html:

<input type="checkbox" {{is_checked}}>

Output will be '<input type="checkbox" {{is_checked}}>', not '<input type="checkbox" checked>' as I expected. Checkbox will be unchecked.

So, how could I deal with checkboxes?

Originally posted by ELV1S:

var template = new Markuper('template.html', {is_checked: 'checked'});
e.connection.response.write( template.parse().html() );

template.html:

<input type="checkbox" {{is_checked}}>

Output will be '<input type="checkbox" {{is_checked}}>', not '<input type="checkbox" checked>' as I expected. Checkbox will be unchecked.

So, how could I deal with checkboxes?

With:

<input type="checkbox" checked="{{is_checked}}">

But what you really want is something like

<input type="checkbox" data-set-checked-attribute="is_checked">

Originally posted by antonioafonso:

With:

<input type="checkbox" checked="{{is_checked}}">

This doesn't work.

checked="" --> checked
checked="off" --> checked
checked="whatever" --> checked

Originally posted by antonioafonso:

But what you really want is something like <input type="checkbox" data-set-checked-attribute="is_checked">

Should I make this work via registerDataAttribute? It's a little bit complicated for this task, isn't it?

Originally posted by ELV1S:

This doesn't work. checked="" --> checked
checked="off" --> checked
checked="whatever" --> checked

Correct, it was just an example.

Originally posted by ELV1S:

Should I make this work via registerDataAttribute? It's a little bit complicated for this task, isn't it?

It's already there...

(registerDataAttribute( 'set-*-attribute', ...)

I've noticed that the version in dev.opera.com is very very old (v0.3 while we're using v0.5) I'll see what I can do regarding that as I'm not the maintainer of those docs/libs.
In the meanwhile I've uploaded the latest version here: http://files.myopera.com/antonioafonso/unite/template.js

Sorry for the inconvenience.
In the future you can post dev related questions/comments here http://dev.opera.com/forums/forum/15906

Originally posted by antonioafonso:

<input type="checkbox" data-set-checked-attribute="is_checked">

This doesn't work either.

{is_checked: 'checked'}

<input type="checkbox" data-set-checked-attribute="is_checked"> --> <input type="checkbox" checked="checked"> --> Checkbox checked



{is_checked: ''}

<input type="checkbox" data-set-checked-attribute="is_checked"> --> <input type="checkbox" checked=""> --> Checkbox checked again!

I think <input {{is_checked}}> should work. It's simple and easy to discover instead of data-do-something-with-attribute="is_checked". I'm planning to patch Markuper to do so.

Originally posted by antonioafonso:

In the future you can post dev related questions/comments here http://dev.opera.com/forums/forum/15906

OK, my next comment will be there.

I believe it will only omit the attribute if is_checked doesn't exist.

Originally posted by ELV1S:

I think <input {{is_checked}}> should work. It's simple and easy to discover instead of data-do-something-with-attribute="is_checked". I'm planning to patch Markuper to do so.

It's just a matter of reading the documentation Unfortunately there is no up to date documentation :\ so it's to anyone's guess..
I'll incorporate your patch if you make it available.

This issue with checkboxes is really more of an issue with the html spec, than with the Markuper library. Some form of <input type="checkbox" checked="false"/> (or something similar) has been requested fairly often by the web development community for some time - it's a massive oversight.

lucideer
I agree. But I don't want to wait years until spec changes :-)