Jaml – לכתוב HTML בג'אווה סקריפט

אם אתם עוסקים ב RIA בטח יוצא לכם לכתוב מידי פעם קוד דינאמי בJavascript שיוצר HTML.

על מנת להקל על המשימה ובנוסף לעזור ביצירת קוד DRY, הומצאה ספרייה שמאוד מושפעת מ HAML בשם JAML.

הספרייה מאפשרת לכתוב תבנית בג'אווה סקריפט שהתוצר שלה הוא HTML עם כמה שפחות השקעה בצד ה HTML או ה ג'אווה סקריט לנושא.

קוד של ג'אווה סקריפט כזה יקרה כך:

Jaml.register('simple', function() {
  div(
    h1("Some title"),
    p("Some exciting paragraph text"),
    br(),

    ul(
      li("First item"),
      li("Second item"),
      li("Third item")
    )
  );
});

Jaml.render('simple');

והמקביל שלו ב HTML יראה:

<div>
  <h1>Some title</h1>
  <p>Some exciting paragraph text</p>
  <br />
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</div>

אפשר לראות שכתיבת בלוק בודד בצורה מקוננת לפעמים קל ונוח יותר, אבל הדוגמא הזו עדיין לא מציגה את כל היכולות של Jaml.

אפשר לראות למשל שימוש בקוד חוזר לפי לוגיקה:

Jaml.register('category', function(category) {
  h1(category.name),
  div({cls: 'category'},
    p(category.products.length + " products in this category:"),

    div({cls: 'products'},
      Jaml.render('product', category.products)
    )
  );
});

//this is the product we will be rendering
var bsg = {
  title      : 'Battlestar Galactica DVDs',
  thumbUrl   : 'thumbnail.png',
  imageUrl   : 'image.png',
  description: 'Best. Show. Evar.'
};

//here's a second product
var snowWhite = {
  title      : 'Snow White',
  description: 'not so great actually',
  thumbUrl   : 'thumbnail.png',
  imageUrl   : 'image.png'
};

//and a category
var category = {
  name    : 'Doovde',
  products: [bsg, snowWhite]
}

Jaml.render('category', category);

שווה לתוצר של  (wordpress קצת מוריד מכאן דברים, אבל תוכלו לראות את התוצר באתר הפרוייקט):

<h1>Doovde</h1>
<div>
 <p>2 products in this category:</p>
 <div>
 <div>
 <h1>Battlestar Galactica DVDs</h1>
 <p>Best. Show. Evar.</p>
 <img src="thumbnail.png" />
 <a href="image.png">View larger image</a>
 <form>
 <label for="quantity">Quantity</label>
 <input type="text" name="quantity" id="quantity" value="1"></input>
 <input type="submit" value="Add to Cart"></input>
 </form>
 </div> <!-- product -->
 <div>
 <h1>Snow White</h1>
 <p>not so great actually</p>
 <img src="thumbnail.png" />
 <a href="image.png">View larger image</a>
 <form>
 <label for="quantity">Quantity</label>
 <input type="text" name="quantity" id="quantity" value="1"></input>
 <input type="submit" value="Add to Cart"></input>
 </form>
 </div> <!-- product -->
 </div> <!-- products -->
</div> <!-- category -->

וכמו שאפשר לראות, נחסך לנו הרבה קוד בצד ה Javascript.

כתיבת תגובה

הזינו את פרטיכם בטופס, או לחצו על אחד מהאייקונים כדי להשתמש בחשבון קיים:

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s