03 一月 2010 @ 10:50 下午 

Closure Template 是google release 的工具Closure Tools其中之一,我會注意到這個工具是因為前端產生動態layout的需求愈來愈多,雖然已經很盡力要將邏輯與template分開,但前端跟layout的結合實在是太密切,很難說分就分,雖然要把layout獨立出來要花更多時間,但至少會更好維護,往後要換template也不用再重寫程式,本篇文章稍微紀錄一下使用心得與過程。

  1. 點此下載,裏面包3個檔案:
    1. SoyToJsSrcCompiler.jar :
    2. soyutils.js
    3. soyutils_usegoog.js
  2. jar檔是主要將template輸出成js檔的程式,而soyutil則是一個完整的stringBuilder,你也可以直接用這個function來使用stringBuilder。另外soyutils_suegoog只是加上了google的namespace罷了。
  3. template檔為XXX.soy ,附檔名一定要是soy,否則執行不會有任何結果,接下來說明template檔,以下是一個很簡單的hello world範例: 第1行的namespace 一定要先宣告,這相對應於到時候呼叫的namespace,namespace的命名接受連續的階層,例如上述宣告examples變會輸出:
    1. if (typeof examples == 'undefined') { var examples = {}; }
      
      {namespace examples}
      /**
       * Says hello to the world.
       */
      {template .helloWorld}
          Hello world!
      {/template}
      
    2. 若宣告為examples.helloworld則會輸出
      if (typeof examples == 'undefined') { var examples = {}; }
      if (typeof examples.helloworld == 'undefined') { examples.helloworld = {}; }
    3. 一個template(soy檔案)可以有多個不同的template,命名範例:
      {template .helloName}
      blablabla
      {/template}
  4. 最後執行
    java -jar SoyToJsSrcCompiler.jar  --outputPathFormat simple.js   simple.soy


Posted By: BLACKBING
Last Edit: 03 一月 2010 @ 11:03 下午

EmailPermalinkComments (0)
Tags
Categories: Javascript練功房

 Last 50 Posts
 Back
Change Theme...
  • Users » 25
  • Posts/Pages » 64
  • Comments » 35
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight

About Me



    No Child Pages.

留言板



    No Child Pages.

Album



    No Child Pages.