Four feature proposals
Four feature proposals
Attached are four extensions to jquery.
One is a
$.text('Test text') utility function, that simplifies cases like
<span style="font-family: courier new,monospace;"> $('div.content').append($.text('Test test <<a href="mailto:my@email.com" target="_blank">my@email.com</a>> here'));</span>
Second the same thing with
<span style="font-family: courier new,monospace;"> $.html('some <div>html</div> with everything')</span>
Third the combination:
<span style="font-family: courier new,monospace;"> $.toHtml('some < special') </span>
which for example encodes the entities. Possible use case: "nl2br()":
<span style="font-family: courier new,monospace;"> $.html($.toHtml(text).replace('\n','<br/>\n'));</span>
I think there should be <i>some</i> way in jquery to accomplish these (without completely replacing the div's content), and <i>I</i> haven't found them in the API.
Their implementation is simple - but improvements are welcome.
Fourth, a simple (but powerful) template engine (less than 2K):
E.g. with
<span style="font-family: courier new,monospace;"> <div id="#templates" style="display: none"> </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="tdata1">
<span style="font-family: courier new,monospace;"> Hello <span class="tname"></span></span>.</span>
<span style="font-family: courier new,monospace;"> <div class="trep">
<span class="val1"></span><span class="val2"></span>
</div>
</span><span style="font-family: courier new,monospace;"></span><span style="font-family: courier new,monospace;"> <div class="sub2">
</span><span style="font-family: courier new,monospace;"> <span class="twrong">This Text wants to be removed.</span>
</span><span style="font-family: courier new,monospace;"> <div><div class="deep"><a>First</a><a href="#">Link</a></div></div>
</div>
</div></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </div></span>
you can do:
<span style="font-family: courier new,monospace;">$('#templates .tdata1').template({</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> '.tname': 'World <<a href="mailto:I@me.com" target="_blank">I@me.com</a>>',
'.trep': [
{'val1': 5, val2: ' beer'},
'Throw the old inner stuff away',
$('<span>NEW</span>')
],
'.sub .twrong': null,
'.sub div .deep': {
'a[href]': function (e) {
e.click(function () { alert('Yes!'); return false;});
}
}
</span><span style="font-family: courier new,monospace;">}).insertAfter('...');
Or the simple examples:
$('<span>Test</span>').template('New text'); => long way to write .text('New test')
</span><span style="font-family: courier new,monospace;">$('<span>Test</span>').template($('<del>X</del>')); => another way to write .empty().append('<del>X</del>')
</span><span style="font-family: courier new,monospace;">$('<span>Test</span>').template(['A','B']);
=> short way to write ...
</span><span style="font-family: courier new,monospace;">
</span><span style="font-family: courier new,monospace;"></span>I'm not sure, whether a template engine should be part of core jquery. But maybe the name is a bit misleading: think about it as <span style="font-family: courier new,monospace;">$.fn.contents /*_on_steroids*/ (args);</span>
Comments, improvements, ... are welcome.
- Tobias
--