बैकबोन.जेएस

Question

में जेड टेम्पलेट का उपयोग करना मुझे नोड.जेएस में जेड के टेम्पलेटिंग इंजन के HAML- जैसे सिंटैक्स से प्यार है, और मुझे बैकबोन.जेएस के भीतर क्लाइंट-साइड का उपयोग करना अच्छा लगेगा।

मैंने बैकबोन को सामान्य रूप से निम्न शैली में Underscore.js templating का उपयोग करके देखा है।

/* Tunes.js */ 
window.AlbumView = Backbone.View.extend({ 
    initialize: function() { 
    this.template = _.template($('#album-template').html()); 
    }, 

    // ... 
}); 

/* Index.html */ 
<script type="text/template" id="album-template"> 
    <span class="album-title"><%= title %></span> 
    <span class="artist-name"><%= artist %></span> 
    <ol class="tracks"> 
    <% _.each(tracks, function(track) { %> 
     <li><%= track.title %></li> 
    <% }); %> 
    </ol> 
</script> 

मैं देखना चाहते हैं क्या AJAX (या किसी अन्य विधि) का उपयोग करने जेड टेम्पलेट्स लाने और वर्तमान HTML के भीतर उन्हें प्रस्तुत करना एक तरीका है।

Answer 1

मैं jade-browser प्रोजेक्ट का उपयोग करके जेड क्लाइंट-साइड चलाने में सक्षम था।

बैकबोन के साथ एकीकरण तब सरल है: _template() के बजाय मैं jade.compile() का उपयोग कर रहा हूं।

एचटीएमएल (स्क्रिप्ट और टेम्पलेट):

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script> 
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script> 
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> 

<script type="template" id="test"> 
div.class1 
    div#id 
    | inner 
    div#nav 
    ul(style='color:red') 
     li #{item} 
     li #{item} 
     li #{item} 
     li #{item} 
script 
    $('body').append('i am from script in jade') 
</script> 

जावास्क्रिप्ट (Backbone.View के साथ एकीकरण):

var jade = require("jade"); 

var TestView = Backbone.View.extend({ 

    initialize: function() { 
    this.template = jade.compile($("#test").text()); 
    }, 

    render: function() { 
    var html = this.template({ item: 'hello, world'}); 
    $('body').append(html); 
    } 
}); 

var test = new TestView(); 
test.render(); 

HERE कोड है।

Answer 2

जैसा कि ऊपर वर्णित @dzejkej है, क्लाइंट पर जेड टेम्पलेट्स का उपयोग करने के सबसे अच्छे तरीकों में से एक जेड-ब्राउज़र का उपयोग करना है; हालांकि, ब्राउज़र में जेड के साथ हमेशा कुछ समस्याएं आई हैं।

• संकलन जेड टेम्पलेट्स धीमी है - जो ठीक है, लेकिन वास्तव में, सभी टेम्पलेट्स कैश्ड किया जाना चाहिए, और यदि आप उन्हें ग्राहक पर कैश, कभी भी वे एक नया पृष्ठ लोड, कैश गायब हो जाता है (का उपयोग कर जब तक एचटीएमएल 5 लगातार भंडारण, उदाहरण के लिए)।
• फ़ाइल में दर्द हो सकता है और अतिरिक्त ब्लोट बना सकता है। यदि आप ब्राउज़र पर जेड टेम्पलेट संकलित कर रहे हैं और टेम्पलेट में include कथन शामिल हैं, तो आपको उन्हें ठीक से संकलित करने के लिए कुछ अतिरिक्त कार्य करना पड़ सकता है। इसके अतिरिक्त, यदि आप सर्वर पर संकलन करने और क्लाइंट को जावास्क्रिप्ट भेजने का निर्णय लेते हैं, तो आपको अभी भी समस्याएं हैं। जब भी जेड टेम्पलेट्स फ़ाइल का उपयोग करते हैं, तो आपके संकलित जेड टेम्पलेट्स बड़े हो सकते हैं क्योंकि उनमें एक ही कोड होता है। उदाहरण के लिए, यदि आप बार-बार एक ही फ़ाइल को शामिल करते हैं, तो उस फ़ाइल की सामग्री कई बार ब्राउज़र पर डाउनलोड की जाएगी, जो बैंडविड्थ को बर्बाद कर रही है।
• समर्थन की कमी - जेड बॉक्स के बाहर क्लाइंट-साइड टेम्पलेट्स के लिए थोड़ा सा समर्थन प्रदान करता है। हां, आप {client: true} कंपाइलर विकल्प का उपयोग कर सकते हैं, लेकिन संकलित टेम्पलेट्स वास्तव में क्लाइंट के लिए अनुकूलित नहीं हैं, और इसके अतिरिक्त, ब्राउज़र में संकलित जेड टेम्पलेट्स की सेवा के लिए कोई तंत्र नहीं है।

ये कुछ कारणों में से हैं जिनसे मैंने Blade project बनाया है। ब्लेड एक जेड जैसी टेम्पलेटिंग भाषा है जो सीधे बॉक्स के बाहर क्लाइंट-साइड टेम्पलेट का समर्थन करती है। यह एक्सप्रेस middleware designed for serving compiled templates to the browser के साथ भी जहाजों। यदि आप अपनी परियोजनाओं के लिए जेड जैसी पसंद के साथ ठीक हैं, तो इसे देखें!

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage

Answer 3

मैं सिर्फ खुला एक NodeJS परियोजना, बुलाया "संपत्ति रैक", कि जेड टेम्पलेट्स precompile और उन्हें जावास्क्रिप्ट के रूप में ब्राउज़र में पेशकश कर सकते हैं कर सकते हैं sourced कार्य करता है।

इसका मतलब है कि प्रतिपादन तेजी से तेज है, फिर भी तेज-सूक्ष्म टेम्पलेट्स क्योंकि ब्राउज़र में कोई संकलन चरण नहीं है।

आर्किटेक्चर थोड़ा अलग है तो आप जो कुछ उल्लेख करते हैं, केवल "templates.js" नामक सभी टेम्पलेट्स के लिए एक जेएस फ़ाइल या जो भी आप चाहते हैं।

आप इसे यहां देख सकते हैं, https://github.com/techpines/asset-rack#jadeasset

सबसे पहले आप यह सर्वर पर सेट अप इस प्रकार है:

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

फिर

:

new JadeAsset({ 
    url: '/templates.js', 
    dirname: __dirname + '/templates' 
}); 

यदि आप टेम्पलेट निर्देशिका इस तरह देखा आपके सभी टेम्पलेट्स "टेम्पलेट्स" के अंतर्गत ब्राउज़र में आते हैं:

$('body').append(Templates.navbar()); 
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'}); 
$('body').append(Templates.footer()); 

वैसे भी, उम्मीद है कि मदद करता है।

Answer 4

आप जेड के अंदर जेड के लिए मेरी नई लाइब्रेरी भी देख सकते हैं। यह < जेड के रूप में सरल है ... </जेड>। https://github.com/charlieamer/jade-query

Answer 5

आप जेड टेम्पलेट्स की पूरी शक्ति नहीं मिलेगा, लेकिन आप पाने जेड को ठीक से उत्पादन अंडरस्कोर टेम्पलेट्स, कुंजी जेड ! ऑपरेटर के साथ <%> टैग भागने से रोक रहा है यह थोड़ा हैक कर सकते हैं, इस तरह:

script#dieTemplate(type='text/template') 
    .die(class!='value-<%= value %>') 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-circle 
     i.fa.fa-star