cl2dlope / distal Goto Github PK

Using qtext when value might be a zero requires a workaround since distal 
assumes the value to be non-existent and hides element instead of showing it 
with a zero.

Example:

{items: []}

<div data-qtext="items.length"></div>

Result: <div> is hidden

Expected result: <div>0</div>

<table data-qrepeat="m list">...</table>

The above code did not work in Opera.

This bug is fixed in r127.

I apologize in advance since this is kindof vague and unfair.  But is there 
anyway to improve performance?  Distal looks simple and promising but based on 
comparative template solutions this is extremely slow.

Take a look at 
http://jsperf.com/transparency-vs-weld-vs-mustache/10
and
http://jsperf.com/transparency-vs-handlebars-finite-list/4
to see what I mean.
Perhaps you can precompile the template or cache it or something along those 
lines for reuse.

Also- And this is really off topic and even more unfair.. I am big fan of SVN 
and all, but github just has so much more exposure for open-source projects 
like this, and allows for forks, and pull-requests, etc.  Also, they have 
hosting which means your nice documentation can also look nice.

I am looking for a way to manipulate the data for an element in the 
distal.beforeText() callback but is unable to do so.
I suspect this to be because the arguments to the callback is passed as value 
and not by reference.

Please let me know if there's any to achieve what I want, in another way.

best regards.

The current behaviour of cloning elements containing data-qrepeat is simple and 
great, however, it has some drawbacks:

Some UI toolkits such as jQuery Mobile modify the DOM after it has been loaded. 
Sometimes they modify the structure so hard, that Distal cannot find it's 
data-qrepeat element again, if the app wants to apply distal() on a list a 
second time.

Example: I have an unordered list of jQuery Mobile checkboxes:
<ul id="mylist">
  <li data-qrepeat="e myelements">
    <label data-qtext="e.name"><input type="checkbox></label>
  </li>
</ul>

When I run $("#mylist").distal(json) for the first time, everything is fine: at 
first, Distal expands the DOM, then jQuery Mobile runs its hooks to modify the 
DOM structure to turn the <label> and <input> elements into a series of spans 
and divs that make the checkboxes look good.

However, now we no longer have the "template" DOM element to run Distal again, 
because jQuery removes the <label data-qtext="e.name"> and replaces it with 
another element (or rather, it moves the <label> somewhere down below). 

Since we are on a single page app, it is likely that we want to update the list 
a second time, eg. to display new results. But we can not.

The problem I see here is that Distal modifies the repeating element 
_in-place_. IMHO the element containing data-qrepeat should not be touched. It 
should be used as a template. The problem could be solved like this:

Whenever Distal encounters a data-repeat attribute, it clones the element the 
given number of times and sets the data-qdup attribute on all clones. Second, 
it sets the original template element to display:none! Later on, when Distal is 
run again on the same template element, it removes all qdup children (which it 
does anyway right now) and clones the original template again.

By using this technique you'll still have the TAL benefits, such as, that the 
HTML contains the full template text and can be edited by authoring tools such 
as DreamWeaver. And my proposal doesn't break backward compatibility; existing 
templates continue to work.

What do you think?

Hey, small issue. When using qtext on a button it changes the value attribute 
instead of innerHTML. While buttons can be used to pass values I don't think 
it's the expected outcome of qtext.

Example:

<button qtext="anything">Text</button>
becomes
<button value="anything">Text</button>
resulting in a button with the text "Text" on it and not "anything" as I 
would've expected.

Workaround is to use "html anything".

I have a loop within an array and I'd like to obtain:

...
<input type="checkbox" ... /><label ...>...</label>
<input type="checkbox" ... /><label ...>...</label>
...

As data-qrepeat should be attached to a tag I need an enclosing one, but this 
leads to:

...
<div ...>
  <input type="checkbox" ... /><label ...>...</label>
</div>
<div ...>
  <input type="checkbox" ... /><label ...>...</label>
</div>
...

is there any way to achieve it?

A good solution would be an additional feature to hide a tag, leaving its 
content like:
<div data-qrepeat="m keywords" data-qmode="content">...</div>

where data-qmode could be "full" (default) to set tag and its content, 
"content" to set only content (tag will disappear in generated content).

qtext does not change innerHTML of labels. I suspect for the same reason as 
<button> didn't work previously. Putting "html" in front of variable name works.

{var: "works"}

<label data-qtext="var"></label>
<label data-qtext="html var">works</label>