关于trimpath的宏定义

Macro Declarations¶  {macro macroName(arg1, arg2, ...argN)}
    ...body of the macro...
  {/macro}    * A macro is like a JavaScript function, except the body of the macro is another JavaScript Template, not JavaScript.
          o That is, the body of the macro may contain JST expressions and statements. 
    * The macroName may be any valid JavaScript variable name.
    * The return value of an invoked macro is a string.
    * You invoke the macro using the ${macroName()} expression syntax.   Examples:
  {macro htmlList(list, optionalListType)}
    {var listType = optionalListType != null ? optionalListType : "ul"}
    <${listType}>
      {for item in list}     
        <li>${item}</li>
      {/for}
    </${listType}>
  {/macro}  Using the macro...
  ${htmlList([ 1, 2, 3])}
  ${htmlList([ "Purple State", "Blue State", "Red State" ], "ol")}
  {var saved = htmlList([ 100, 200, 300 ])}
  ${saved} and ${saved}Regarding macro scope: by default, macros are defined private to each template. If you want to export a macro so that it can be reused in other templates (such as building up a helper library of macros), one approach is to save a reference to your macro into your ''contextObject''. For example, in the ''contextObject'' that's the argument to ''template.process(contextObject)'', you can set ''contextObject'exported' = {};'' before you call process(). Then, here's how you can capture a macro into ''contextObject'exported'''...  {macro userName(user)}
    {if user.aliasName != null && user.aliasName.length > 0}
      ${user.aliasName}
    {else}
      ${user.login}
    {/if}
  {/macro}
  ${exported.userName = userName |eat}Cleverly, you might also set ''contextObject'exported' = contextObject;'' It's circular, but it works. 关于宏的导出，我看得不是很明白，谁能和我讲解一下吗？ 如何定义一个宏，导出并在另一个模板中使用。写个简单的demo就好，谢谢。

解决方案 »

  1.   

    大概是这样玩的：
    <head>
    <script language="javascript" src="http://trimpath.googlecode.com/files/trimpath-template-1.0.38.js"></script>
    </head>
    <body>
    <script id="myTemplate" type="text/html">
        Hello ${customer.first} ${customer.last}.<br/>
        Your shopping cart has ${products.length} item(s):
        <table>
         <tr><td>Name</td><td>Description</td>
             <td>Price</td><td>Quantity & Alert</td></tr>
         {for p in products}
             <tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
                 <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
                 </tr>
         {forelse}
             <tr><td colspan="4">No products in your cart.</tr>
         {/for}
        </table>
        {if customer.level == "gold"}
          We love you!  Please check out our Gold Customer specials!
        {else}
          Become a Gold Customer by buying more stuff here.
        {/if}
    </script>
    <div id="div1" style="background:red;"></div>
    <div id="div2" style="background:green;"></div>
    <script>
        var data = {
            products : [ { name: "mac", desc: "computer",     
                           price: 1000, quantity: 100, alert:null },
                         { name: "ipod", desc: "music player", 
                           price:  200, quantity: 200, alert:"on sale now!" },
                         { name: "cinema display", desc: "screen",       
                           price:  800, quantity: 300, alert:"best deal!" } ],
            customer : { first: "John", last: "Public", level: "gold" }
        };
        var data2 = {
            products : [ { name: "苹果", desc: "电脑",     
                           price: 1000, quantity: 100, alert:null },
                         { name: "飞鸽", desc: "自行车", 
                           price:  200, quantity: 200, alert:"打折!" },
                         { name: "三星", desc: "显示器",       
                           price:  800, quantity: 300, alert:"买一送一!" } ],
            customer : { first: "Zswang", last: "清洁工", level: "会员" }
        };
        // The one line processing call...
        var result = TrimPath.processDOMTemplate("myTemplate", data);
        // Voila!  That's it -- the result variable now holds 
        // the output of our first rendered JST.
    document.getElementById("div1").innerHTML = result;    // Alternatively, you may also explicitly parse the template...
        var myTemplateObj = TrimPath.parseDOMTemplate("myTemplate");
    document.getElementById("div2").innerHTML = myTemplateObj.process(data2);

    </script>
    </body>
      

  2.   

    宏类似函数：
    <head>
    <script language="javascript" src="http://trimpath.googlecode.com/files/trimpath-template-1.0.38.js"></script>
    </head>
    <body>
    <script id="myTemplate" type="text/html">
    {macro htmlList(list, optionalListType)}
    {var listType = optionalListType != null ? optionalListType : "ul"}
    <${listType}>
    {for item in list}     
    <li>${item}</li>
    {/for}
    </${listType}>
    {/macro}
    ${htmlList([ "Purple State", "Blue State", "Red State" ], "ol")}
    {var saved = htmlList([ 100, 200, 300 ])}
    ${saved} and ${saved}
    </script>
    <div id="div1" style="background:red;"></div>
    <script>
        var result = TrimPath.processDOMTemplate("myTemplate", { customer: {a: "小新"}});
    document.getElementById("div1").innerHTML = result;
    </script>
    </body>