$( "<div>" , { "class" : "something" ,id:10})
рд▓реЗрдХрд┐рди рдЪреВрдВрдХрд┐ рдкрдардиреАрдпрддрд╛ рдЦрд░рд╛рдм рд╣реИ, рдЗрд╕рд▓рд┐рдП рдПрдХ рдЫреЛрдЯрд╛ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЧрдпрд╛ред
рдЯреИрдЧ, рд╡рд┐рд╢реЗрд╖рддрд╛рдПрдБ рдФрд░ рд╕рд╛рдордЧреНрд░реА
// var h = Htmls .
h.div() == '<div></div>'
// .
h.div().Class( "some" ).Id(10) == '<div class="some" id="10"></div>'
// $(), .
h.div().$( "some text" ) == '<div>some text</div>'
* This source code was highlighted with Source Code Highlighter .
рдЯреЗрдореНрдкрд▓реЗрдЯ рдЗрдВрдЬрди рдХреЗ рдорд╛рдирдХ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдкрд░ рдХреНрдпрд╛ рдлрд╛рдпрджрд╛ рд╣реИ?
рдореИрдВ рдЗрд╕реЗ рдЗрд╕ рддрдереНрдп рдореЗрдВ рджреЗрдЦрддрд╛ рд╣реВрдВ рдХрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдИрдВрдЯреЛрдВ рдХрд╛ рдПрдХ рд╕реЗрдЯ рд╣реИ рдЬрд┐рд╕реЗ рд╣рдо рдХреБрдЫ рдФрд░ рдЕрдзрд┐рдХ рдЬрдЯрд┐рд▓ рдФрд░ рдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдореЗрдВ рдбрд╛рд▓ рд╕рдХрддреЗ рд╣реИрдВред
рд╕рдорд╕реНрдпрд╛ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░реЗрдВ
var рдЖрдЗрдЯрдо = [1,2,3]
рдкрд╛рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
</ ul >
рдорд╛рдирдХ рджреГрд╖реНрдЯрд┐рдХреЛрдгред
<% if (items.length) %>
< ul >
<% for ( var item in items){ %>
< li > <% = item %> </ li >
<% } %>
</ ul >
<% } %>
рдорд╛рдирдХ рдирд╣реАрдВ
function defaultUl(items){
if (!items.length)
return null ;
return h.ul(items.map( function (i){
return h.li(i);
}));
}
defaultUl(items);
рдЕрдЧрд░ рд╣рдореЗрдВ рдЕрд▓рдЧ рд╕реВрдЪреА рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рддреЛ рджреЛрдиреЛрдВ рджреГрд╖реНрдЯрд┐рдХреЛрдгреЛрдВ рдХреЗ рд╕рд╛рде рдХреНрдпрд╛ рдХрд░рдирд╛ рд╣реИ, рдЗрд╕рдХреА рддреБрд▓рдирд╛ рдХрд░реЗрдВред
рд▓реА рд╕реЗ рдХреБрдЫ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЬрд░реВрд░рдд рд╣реИ?
< ul >
< li id ="1" > 1 </ li >
< li id ="2" > 2 </ li >
< li id ="3" > 3 </ li >
</ ul >
рдХреЛрдИ рд╕рд╡рд╛рд▓ рдирд╣реАрдВред
function defaultUl(items, trans){
if (!items.length)
return null ;
return h.ul(
items.map( function (i){
return trans(h.li(i),i);
}));
}
defaultUl(items, function (tag, item){
return tag.Id(item);
}
рдПрдХ рдФрд░ рдЫреЛрдЯрд╛ рдЙрджрд╛рд╣рд░рдг
var persons =
[{id:1,name: "First" , balance: 100},
{id:2,name: "Second" , balance: -200},
{id:3,name: "Third" , balance: 300}];
< table >
< tr >< th > Name </ th >< th > Balance </ th ></ tr >
< tr id ="1" class ="green" >< td > First </ td >< td > 100 </ td ></ tr >
< tr id ="2" class ="red" >< td > Second </ td >< td > -200 </ td ></ tr >
< tr id ="3" class ="green" >< td > Third </ td >< td > 300 </ td ></ tr >
</ table >
var tr = function (tag, items){
return h.tr(items.map( function (x){ return tag(x);}));
};
h.Head = function (){
var args = Array.prototype.slice.call(arguments);
return tr(h.th, args);
};
h.Row = function (){
var args = Array.prototype.slice.call(arguments);
return tr(h.td, args);
};
with (Htmls) {
var htmlPart = table(
Head( "Name" , "Balance" ),
persons.map( function (p){
return Row(p.name, p.balance).Id(p.id).Class(p.balance > 0 ? "green" : "red" );
}));
}
рд╕реНрд░реЛрдд рдХреЛрдб
http://jshtmlbuilder.codeplex.com