क्या स्क्रिप्ट टैग के साथ हैंडलबार टेम्पलेट लोड करना संभव है? या प्रोग्राम के रूप में हैंडल टेम्पलेट्स परिभाषित Ember.js

Question

में आप पर्याप्त मैं अपने html फ़ाइल

में अपने सभी हैंडल टेम्पलेट्स परिभाषित करने के लिए नहीं करना चाहते हैं मैं इस

<script type="text/x-handlebars" data-template-name="nav-bar" src="template.handlebar"></script> 

की कोशिश की लेकिन यह काम नहीं किया। क्या मैं अपने टेम्पलेट को प्रोग्रामेटिक रूप से टेम्पलेट्स को परिभाषित नहीं कर सकता हूं या यहां तक ​​कि केवल हैंडलबार फ़ाइलों को लोड भी कर सकता हूं ताकि मैं पुन: उपयोग कर सकूं और मुझे लगता है कि यह चीजों को थोड़ा और अधिक बनाए रखने योग्य बनाता है।

मैंने उन्हें केवल AJAX के साथ लोड करने और उन्हें सिर में जोड़ने की कोशिश की, यह ठीक काम करता है मैं इसे वहां देख सकता हूं लेकिन एम्बर.जेएस इसे पहले से लोड नहीं होने के बाद इसे पढ़ नहीं पाया है और टेम्पलेट्स को परिभाषित नहीं किया गया है।

Answer 1

या Ember.js में प्रोग्राम के हैंडल टेम्पलेट्स परिभाषित

आप Ember.Handlebars.compile का उपयोग करके टेम्पलेट्स प्रोग्राम के रूप में परिभाषित कर सकते हैं, http://jsfiddle.net/pangratz666/wxrxT/ देखें:

Ember.View.create({ 
    personName: 'Dr. Tobias Fünke', 
    template: Ember.Handlebars.compile('Hello {{personName}}') 
}).append();​ 

या आप Ember.TEMPLATES को संकलित टेम्पलेट्स जोड़ने सरणी, http://jsfiddle.net/pangratz666/58tFP/ देखें:

Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}'); 

Ember.View.create({ 
    personName: 'Dr. Tobias Fünke', 
    templateName: 'myFunkyTemplate' 
}).append();​ 

---

मैं की तरह रिचर्ड मिलन कहा कुछ उपकरणों का उपयोग करने की सिफारिश करेंगे। interline/ember-skeleton पर भी एक नज़र डालें जो टेम्पलेट्स के संकलन के लिए समर्थन प्रदान करता है।

Answer 2

यह संभव है, लेकिन आपको पहले अपने टेम्पलेट्स को प्रीकंपाइल करना होगा। यह आपको एक ही फ़ाइल में अपने सभी टेम्पलेट्स को शामिल करने की अनुमति देगा।

• यदि आप रेल का उपयोग कर रहे हैं, तो आप इसे करने के लिए ember-rails gem का उपयोग कर सकते हैं।
• नहीं तो आप these instructions on how to precompile handlebars

बाद में पालन कर सकते हैं, तो आप जावास्क्रिप्ट फ़ाइल को शामिल करने की आवश्यकता होगी।

<script src="path/to/compiled/templates.js" type="text/javascript"></script> 

Answer 3

तो के बाद से मैं अभी भी अपने टेम्पलेट के लिए अलग-अलग फ़ाइलों चाहता था और मैं उन्हें जावास्क्रिप्ट में तार में परिभाषित करने के लिए नहीं करना चाहता था मैं इस एक साथ कल रात

काट दिया यह एक तुल्यकालिक आलसी लोडर, यह सब टेम्पलेट्स लोड करता है पहले तो एंबर और मेरे कोड के बाकी,

 //fake function so that every loads fine will get redefined in application.js 
     function initializeApp(){} 

     function loadTemplates(){ 
      var arg = arguments[0], 
       next = Array.prototype.slice.call(arguments,1); 
      if(typeof arg != 'string'){ 
       arg() 
      }else{ 
       var scriptObj = document.createElement('script'); 
       scriptObj.type = 'text/x-handlebars'; 
       $(scriptObj).attr('data-template-name', arg.replace('.handlebars', '').substring(arg.lastIndexOf('/')+1)) 
       $.get(arg, function(data){ 
        scriptObj.text = data; 
        document.head.appendChild(scriptObj); 
        if(next.length > 0) loadTemplates.apply(this, next); 
       }); 
      } 
     } 

     function loadScripts() { 
      var script = arguments[0], 
       scriptObj = document.createElement('script'), 
       next = Array.prototype.slice.call(arguments,1); 
      scriptObj.type = 'text/javascript'; 
      scriptObj.src = script; 
      scriptObj.onload = scriptObj.onreadystatechange = (next.length > 0) ? function(){loadScripts.apply(this, next)} : function(){$(document).ready(function() {initializeApp()})}; 
      document.head.appendChild(scriptObj); 
     } 

     function loadApp(obj){ 
      loadTemplates.apply(this, obj.templates.concat(function(){loadScripts.apply(this,obj.scripts)})) 
     } 

     window.onload = function(){ 
      loadApp({ 
       templates: 
        [ 
         '/javascripts/views/templates/nav-bar.handlebars', 
        ], 
       scripts: 
        [ 
         'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMaps', 
         '/javascripts/lib/bootstrap.js', 
         '/javascripts/lib/rails.js', 
         '/javascripts/lib/ember.js', 
         '/javascripts/application.js', 
         '/javascripts/views/nav_bar.js', 
        ] 
      }) 
     } 

संपादित करें: मैं यह साफ है और यह ठीक से काम हालांकि

Answer 4

यह संभव है क्रोम में केवल परीक्षण किए गए और हाँ, आप इसे बिना कर सकते हैं एक और दूसरे उपकरण का उपयोग, बस हमें ember.js ing और कुछ भी नहीं। मैंने इसे इस तरह किया:

1) एचटीएमएल कोड। ध्यान दें कि उनमें से किसी भी का उपयोग करने से पहले सभी हैंडलबार्स फ़ाइलों को लोड करने की आवश्यकता है। यहां, इसकी एक फ़ाइल हैडलबार्स नाम की है।js

<body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script> 
    <script src="js/libs/ember-0.9.8.1.min.js"></script>  
    <script src="js/handlebars.js"></script> 
    <script src="js/app.js"></script> 
</body> 

2) इस फाइल handlebars.js, निम्नलिखित शामिल एंबर

var src = "Hello, <b>{{name}}</b>"; 
Em.TEMPLATES["say-hello"] = Em.Handlebars.compile(src); 

3 की संकलक) का उपयोग कर और फिर अपने app.js फाइल के अंदर, बस इसका इस्तेमाल के रूप में यह उपलब्ध थे (जो यह है):

var hu = Em.View.create({ 
    templateName: "say-hello", 
    name: "Allô", 
    mouseDown: function() { 
    window.alert("hello world!"); 

    } 
}); 

hu.appendTo("body"); 

Answer 5

आप एंबर लोड करने से पहले डोम में अपने टेम्पलेट लोड है, तो आप को संकलित करने के लिए या अपने टेम्पलेट्स रजिस्टर की जरूरत नहीं है। एम्बर तुम्हारे साथ आएगा और आपके लिए यह करेगा।

यहाँ एक लेख दिखा रहा है कैसे:

http://weboriented.wordpress.com/2012/09/02/loading-handlebars-templates-in-ember-using-curl-js/

Answer 6

तुम भी पैच कर सकते हैं पर मिल

Em.View.reopen({ 
    templateForName: function(name, type) { 
     if (!name) { return; } 

     var templates = Em.get(this, 'templates'), 
      template = Em.get(templates, name); 

     if (!template) { 
      $.ajax({ 
       url: 'templates/%@.hbs'.fmt(name), 
       async: false 
      }).success(function(data) { 
       template = Ember.Handlebars.compile(data); 
      }); 
     } 

     if (!template) { 
      throw new Em.Error('%@ - Unable to find %@ "%@".'.fmt(this, type, name)); 
     } 

     return template; 
    } 
}); 

अद्यतन टेम्पलेट्स लोड करने के लिए एंबर दृश्य: के बाद से एंबर 1.0.0-pre.3 इस समाधान probabaly कोई और अधिक काम (शायद हाल एंबर के लिए चले जा सकता है)

Answer 7

यहाँ एक और समाधान है, अपने एंबर देखें/घटक के अंदर:

var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') }); 
var view = this.createChildView(viewClass); 
var html = view.renderToBuffer().buffer; 

Answer 8

यह एक पुराना सवाल है, इसलिए सभी उत्तरों थोड़े पुराने हैं। Ember CLI टेम्पलेट्स को नामकरण सम्मेलन द्वारा आवश्यक रूप से लोड किया जाता है .js मॉड्यूल के रूप में। यह थोड़ा अजीब बात है, क्योंकि आप प्रस्तावित ईएस 6 आयात वाक्यविन्यास लिखते हैं और बिल्ड इसे requ.js वाक्यविन्यास में पारदर्शी बनाता है, लेकिन यह वास्तव में अच्छी तरह से काम करता है।