अंडरस्कोर में आंशिक टेम्पलेट (बस हैंडलबार्स की तरह)?

Question

मैं इस

var PeopleModel = Backbone.Model.extend({ 
defaults: {    
    "people": [ 
      { "username": "alan", "firstName": "Alan", "lastName": "Johnson", "phone": "1111", "email": "alan@test.com" }, 
      { "username": "allison", firstName: "Allison", "lastName": "House", "phone": "2222", "email": "allison@test.com" }, 
      { "username": "ryan", "firstName": "Ryan", "lastName": "Carson", "phone": "3333", "email": "ryan@test.com" }, 
      { "username": "ed", "firstName": "Edward", "lastName": "Feild", "phone": "4444", "email": "ed@test.com" }, 
      { "username": "phil", "firstName": "Philip", "lastName": "Doom", "phone": "5555", "email": "phil@test.com" }, 
      { "username": "gerald", "firstName": "Gerald", "lastName": "Butler", "phone": "6666", "email": "gerald@test.com" } 
    ], 
    "company": {"name": "Random Corp."}, 
    "country": "England" 
} 

}); 

और नीचे की तरह एक रीढ़ मॉडल मेरे टेम्पलेट हैं

<script id="people-template" type="text/x-handlebars-template"> 
{{#each people}} 
    {{> person}} 
{{/each}} 
</script> 

<script id="person-partial" type="text/x-handlebars-template"> 
<div class="person"> 
    <h2>{{fullName}} </h2> 
    <div class="phone">{{phone}}</div> 
    <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>  
</div> 

यह कैसे मैं आंशिक handlebars.js का उपयोग कर लागू किया है।

मेरे सवालों का

1.Do हम समान बात है, मैं Underscore.js टेम्पलेट इंजन के बैठाना partials मतलब है?

तो 2. यदि हम कैसे Underscore.js टेम्पलेट इंजन

Answer 1

नहीं, अंडरस्कोर के टेम्पलेट्स में कोई मूल आंशिक समर्थन है में आंशिक लागू करते हैं। लेकिन, आप <% ... %> के अंदर जो भी जावास्क्रिप्ट चाहते हैं उसे बहुत अधिक रख सकते हैं; विशेष रूप से, आप अपने कार्यों को कॉल कर सकते हैं ताकि आप बिना किसी कठिनाई के कुछ आंशिक-आश जोड़ सकें। आप इस प्रकार का टेम्पलेट हो सकता है:

<script id="people-template" type="text/x-handlebars-template"> 
    <% _(people).each(function(person) { %> 
     <%= partial('person', person) %> 
    <% }) %> 
</script> 

और फिर एक partial समारोह window में जोड़ें:

window.partial = function(which, data) { 
    var tmpl = $('#' + which + '-partial').html(); 
    return _.template(tmpl)(data); 
}; 

डेमो: http://jsfiddle.net/ambiguous/HDuj5/9/

काफी के रूप में चालाक नहीं है यही कारण है कि और Handlebars में {{> ... }} सुंदर के रूप में लेकिन अंडरस्कोर के टेम्पलेट्स जावास्क्रिप्ट के चारों ओर एक बहुत ही पतली आवरण हैं और यह आपको कुछ हद तक सीमित करता है। आप सीधे window में चीजों को डालने से बचने के लिए नेमस्पेस का उपयोग कर सकते हैं या आप अपने मानक सहायकों को स्थापित करने के लिए {variable: ...} option to _.template और एक रैपर का उपयोग कर सकते हैं।

Answer 2

या वैश्विक गुंजाइश तुम इतनी तरह वैश्विक टेम्पलेट सहायकों में मिश्रण कर सकते हैं का उपयोग कर से बचने के लिए:

(function() { 
    var originalUnderscoreTemplateFunction = _.template; 
    var templateHelpers = {}; 

    _.mixin({ 
     addTemplateHelpers : function(newHelpers) { 
      _.extend(templateHelpers, newHelpers); 
     }, 

     template : function(text, data, settings) { 
      // replace the built in _.template function with one that supports the addTemplateHelpers 
      // function above. Basically the combo of the addTemplateHelpers function and this new 
      // template function allows us to mix in global "helpers" to the data objects passed 
      // to all our templates when they render. This replacement template function just wraps 
      // the original _.template function, so it sould be pretty break-resistent moving forward. 

      if(data) 
      { 
       // if data is supplied, the original _.template function just returns the raw value of the 
       // render function (the final rentered html/text). So in this case we just extend 
       // the data param with our templateHelpers and return raw value as well. 

       _.defaults(data, templateHelpers); // extend data with our helper functions 
       return originalUnderscoreTemplateFunction.apply(this, arguments); // pass the buck to the original _.template function 
      } 

      var template = originalUnderscoreTemplateFunction.apply(this, arguments); 

      var wrappedTemplate = function(data) { 
       _.defaults(data, templateHelpers); 
       return template.apply(this, arguments); 
      }; 

      return wrappedTemplate; 
     } 
    } 
} 

फिर

_.addTemplateHelpers({ 
    partial : function() { 
     return _.template(
      $('#' + which + '-partial').html(), 
      data 
     ); 
    } 
}); 

फोन यहाँ GitHub पर underscore mixin करने के लिए एक कड़ी है।

Answer 3

मुझे लगता है कि इस डेव जवाब देने के लिए समान है, लेकिन शायद कम कोड की आवश्यकता होती है:

function partialTemplate(origTemplate, partialValues){ 
    return function(values){ 
     return origTemplate(_.defaults(values, partialValues)); 
    }; 
} 

उदाहरण उपयोग:

var t = _.template('<%= val1 %>,<%= val2 %>'); // original template requiring 2 values 
var pt = partialTemplate(t, {val1:1}); // partial template with 1 value pre-populated 
pt({val2:2}); // returns '1,2' 
pt({val2:3}); // returns '1,3'