क्या हैंडलबार जेएस में तार्किक ऑपरेटर को मानक हैंडलबार.जेएस सशर्त ऑपरेटर में शामिल करने का एक तरीका है? कुछ इस तरह:
{{#if section1 || section2}}
.. content
{{/if}}मुझे पता है कि मैं अपना खुद का सहायक लिख सकता हूं, लेकिन पहले मैं यह सुनिश्चित करना चाहता हूं कि मैं पहिया को सुदृढ़ नहीं कर रहा हूं।
जवाबों:
यह ब्लॉक हेल्पर के साथ 'धोखा' से संभव है। यह संभवत: उन लोगों की विचारधारा के खिलाफ जाता है जिन्होंने हैंडलबार विकसित किए।
Handlebars.registerHelper('ifCond', function(v1, v2, options) {
if(v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
});फिर आप इस तरह से टेम्पलेट में सहायक को कॉल कर सकते हैं
{{#ifCond v1 v2}}
{{v1}} is equal to {{v2}}
{{else}}
{{v1}} is not equal to {{v2}}
{{/ifCond}}registerBoundHelperहैंडलबार सिंटैक्स के साथ सौदा नहीं कर सकता है। वर्कअराउंड एक कस्टम दृश्य बनाने के लिए है: stackoverflow.com/questions/18005111/…
समाधान एक कदम आगे बढ़ाते हुए। यह तुलना ऑपरेटर जोड़ता है।
Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
switch (operator) {
case '==':
return (v1 == v2) ? options.fn(this) : options.inverse(this);
case '===':
return (v1 === v2) ? options.fn(this) : options.inverse(this);
case '!=':
return (v1 != v2) ? options.fn(this) : options.inverse(this);
case '!==':
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
case '<':
return (v1 < v2) ? options.fn(this) : options.inverse(this);
case '<=':
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
case '>':
return (v1 > v2) ? options.fn(this) : options.inverse(this);
case '>=':
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
case '&&':
return (v1 && v2) ? options.fn(this) : options.inverse(this);
case '||':
return (v1 || v2) ? options.fn(this) : options.inverse(this);
default:
return options.inverse(this);
}
});इसे इस तरह से एक टेम्पलेट में उपयोग करें:
{{#ifCond var1 '==' var2}}कॉफी स्क्रिप्ट संस्करण
Handlebars.registerHelper 'ifCond', (v1, operator, v2, options) ->
switch operator
when '==', '===', 'is'
return if v1 is v2 then options.fn this else options.inverse this
when '!=', '!=='
return if v1 != v2 then options.fn this else options.inverse this
when '<'
return if v1 < v2 then options.fn this else options.inverse this
when '<='
return if v1 <= v2 then options.fn this else options.inverse this
when '>'
return if v1 > v2 then options.fn this else options.inverse this
when '>='
return if v1 >= v2 then options.fn this else options.inverse this
when '&&', 'and'
return if v1 and v2 then options.fn this else options.inverse this
when '||', 'or'
return if v1 or v2 then options.fn this else options.inverse this
else
return options.inverse this'||'और के बारे में मत भूलना '&&'। मैंने इन मामलों को जोड़ा और वे बहुत उपयोगी हैं।
v1 = Ember.Handlebars.get(this, v1, options) v2 = Ember.Handlebars.get(this, v2, options)
हैंडलबार नेस्टेड ऑपरेशन का समर्थन करता है। यदि हम अपने तर्क को थोड़ा अलग तरीके से लिखते हैं तो यह बहुत अधिक लचीलापन (और क्लीनर कोड) प्रदान करता है।
{{#if (or section1 section2)}}
.. content
{{/if}}वास्तव में, हम सभी प्रकार के तर्क जोड़ सकते हैं:
{{#if (or
(eq section1 "foo")
(ne section2 "bar"))}}
.. content
{{/if}}बस इन सहायकों को पंजीकृत करें:
Handlebars.registerHelper({
eq: (v1, v2) => v1 === v2,
ne: (v1, v2) => v1 !== v2,
lt: (v1, v2) => v1 < v2,
gt: (v1, v2) => v1 > v2,
lte: (v1, v2) => v1 <= v2,
gte: (v1, v2) => v1 >= v2,
and() {
return Array.prototype.every.call(arguments, Boolean);
},
or() {
return Array.prototype.slice.call(arguments, 0, -1).some(Boolean);
}
});optionsनिष्पादन के साथ ifपद्धति को बनाए रखना बेहतर है और परीक्षण करना आसान है। धन्यवाद!
andऔर orसहायक केवल 2 मापदंडों के साथ काम करते हैं, जो आप नहीं चाहते हैं। मैं दो से अधिक मापदंडों का समर्थन करने के लिए दोनों सहायकों andऔर orसहायकों को फिर से तैयार करने में कामयाब रहा । के लिए इस एक लाइनर का प्रयोग करें and: return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);और के लिए इस एक लाइनर का उपयोग or: return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);।
यह एक पायदान ऊपर ले जाना, आप में से उन लोगों के लिए जो किनारे पर रहते हैं।
gist : https://gist.github.com/akhoury/9118682 डेमो : नीचे कोड स्निपेट
{{#xif EXPRESSION}} {{else}} {{/xif}}encodeURIComponent(property)template( {name: 'Sam', age: '20' } )दिया ageहै , नोटिस एक है string, बस इसलिए मैं parseInt()इस पोस्ट में बाद में डेमो कर सकता हूं<p>
{{#xif " name == 'Sam' && age === '12' " }}
BOOM
{{else}}
BAMM
{{/xif}}
</p><p>
BOOM
</p> Handlebars.registerHelper("xif", function (expression, options) {
return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});{{x EXPRESSION}}parseInt(property)template( {name: 'Sam', age: '20' } ), ageएक है stringकुछ भी डेमो प्रयोजन के लिए, यह हो सकता है ..<p>Url: {{x "'hi' + name + ', ' + window.location.href + ' <---- this is your href,' + ' your Age is:' + parseInt(this.age, 10)"}}</p><p>Url: hi Sam, http://example.com <---- this is your href, your Age is: 20</p>यह थोड़ा बड़ा लगता है क्योंकि मैंने वाक्य रचना का विस्तार किया और स्पष्टता के उद्देश्य से लगभग प्रत्येक पंक्ति पर टिप्पणी की
Handlebars.registerHelper("x", function(expression, options) {
var result;
// you can change the context, or merge it with options.data, options.hash
var context = this;
// yup, i use 'with' here to expose the context's properties as block variables
// you don't need to do {{x 'this.age + 2'}}
// but you can also do {{x 'age + 2'}}
// HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result.
with(context) {
result = (function() {
try {
return eval(expression);
} catch (e) {
console.warn('•Expression: {{x \'' + expression + '\'}}\n•JS-Error: ', e, '\n•Context: ', context);
}
}).call(context); // to make eval's lexical this=context
}
return result;
});
Handlebars.registerHelper("xif", function(expression, options) {
return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});
var data = [{
firstName: 'Joan',
age: '21',
email: 'joan@aaa.bbb'
}, {
firstName: 'Sam',
age: '18',
email: 'sam@aaa.bbb'
}, {
firstName: 'Perter',
lastName: 'Smith',
age: '25',
email: 'joseph@aaa.bbb'
}];
var source = $("#template").html();
var template = Handlebars.compile(source);
$("#main").html(template(data));h1 {
font-size: large;
}
.content {
padding: 10px;
}
.person {
padding: 5px;
margin: 5px;
border: 1px solid grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
<div class="content">
{{#each this}}
<div class="person">
<h1>{{x "'Hi ' + firstName"}}, {{x 'lastName'}}</h1>
<div>{{x '"you were born in " + ((new Date()).getFullYear() - parseInt(this.age, 10)) '}}</div>
{{#xif 'parseInt(age) >= 21'}} login here:
<a href="http://foo.bar?email={{x 'encodeURIComponent(email)'}}">
http://foo.bar?email={{x 'encodeURIComponent(email)'}}
</a>
{{else}} Please go back when you grow up. {{/xif}}
</div>
{{/each}}
</div>
</script>
<div id="main"></div>यदि आप ऊपरी स्तर के दायरे तक पहुंच चाहते हैं, तो यह थोड़ा अलग है, अभिव्यक्ति सभी तर्कों का JOIN है, उपयोग: संदर्भ डेटा इस तरह दिखता है:
// data
{name: 'Sam', age: '20', address: { city: 'yomomaz' } }
// in template
// notice how the expression wrap all the string with quotes, and even the variables
// as they will become strings by the time they hit the helper
// play with it, you will immediately see the errored expressions and figure it out
{{#with address}}
{{z '"hi " + "' ../this.name '" + " you live with " + "' city '"' }}
{{/with}}Handlebars.registerHelper("z", function () {
var options = arguments[arguments.length - 1]
delete arguments[arguments.length - 1];
return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]);
});
Handlebars.registerHelper("zif", function () {
var options = arguments[arguments.length - 1]
delete arguments[arguments.length - 1];
return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]) ? options.fn(this) : options.inverse(this);
});{{#each}} ... {{xif ' ../name === this.name' }} {{/each}}... लेकिन मैं अभी भी जांच कर रहा हूं ..
{{z ...}}सहायक
eval(expression);साथ अपनी जगह लेने की कोशिश करें: eval('(function(){try{return ' + expression + ';}catch(e){}})();');- मुझे पता है कि यह बदसूरत हो रहा है, लेकिन ऐसा करने का एक सुरक्षित तरीका नहीं सोच सकता - कृपया ध्यान रखें कि यह निष्पादित करने के लिए बहुत "तेज़" नहीं है, मैं इसमें ऐसा नहीं करूंगा भारी चलना।
सहायक कार्य लिखे बिना ऐसा करने का एक सरल तरीका है ... यह पूरी तरह से टेम्पलेट के भीतर किया जा सकता है।
{{#if cond1}}
{{#if con2}}
<div> and condition completed</div>
{{/if}}
{{else}}
<div> both conditions weren't true</div>
{{/if}}संपादित करें: इसके विपरीत आप यह कर या कर सकते हैं:
{{#if cond1}}
<div> or condition completed</div>
{{else}}
{{#if cond2}}
<div> or condition completed</div>
{{else}}
<div> neither of the conditions were true</div>
{{/if}}
{{/if}}संपादित करें / ध्यान दें: हैंडलबार की वेबसाइट से: handlebarsjs.com यहाँ झूठे मूल्य हैं:
यदि हेल्पर किसी ब्लॉक को सशर्त रूप से प्रस्तुत करने के लिए उपयोग कर सकता है। यदि इसका तर्क गलत, अपरिभाषित, अशक्त, "" या [] ("गलत" मूल्य) देता है, तो किसी भी 'cond' (जैसे cond1 या cond2) को सही नहीं माना जाएगा।
यहां पोस्ट किए गए सभी उत्तरों के साथ एक समस्या यह है कि वे बाध्य गुणों के साथ काम नहीं करते हैं, अर्थात जब गुण बदलते हैं तो स्थिति का पुनर्मूल्यांकन नहीं किया जाता है। यहाँ सहायक सहायक बाइंडिंग का थोड़ा और उन्नत संस्करण है। यह एम्बर स्रोत से बाइंड फ़ंक्शन का उपयोग करता है , जिसका उपयोग सामान्य एम्बर को लागू करने के लिए भी किया जाता है#if सहायक ।
यह एक बाएं हाथ की ओर एक एकल बंधी हुई संपत्ति तक सीमित है, जो दाएं-हाथ की तरफ एक निरंतरता की तुलना में है, जो मुझे लगता है कि अधिकांश व्यावहारिक उद्देश्यों के लिए पर्याप्त है। यदि आपको एक साधारण तुलना की तुलना में कुछ अधिक उन्नत की आवश्यकता है, तो शायद कुछ कम्प्यूटेड संपत्तियों की घोषणा करना और #ifइसके बजाय सामान्य सहायक का उपयोग करना शुरू करना अच्छा होगा ।
Ember.Handlebars.registerHelper('ifeq', function(a, b, options) {
return Ember.Handlebars.bind.call(options.contexts[0], a, options, true, function(result) {
return result === b;
});
});आप इसे इस तरह से उपयोग कर सकते हैं:
{{#ifeq obj.some.property "something"}}
They are equal!
{{/ifeq}}बेहतर समाधान जो मूल रूप से किसी भी द्विआधारी ऑपरेटर के साथ काम करता है (कम से कम संख्या में, तार eval के साथ अच्छी तरह से काम नहीं करता है, टोकरे की स्थिति को ध्यान में रखते हुए अगर किसी व्यक्ति के लिए एक गैर-संचालित ऑपरेटर का उपयोग कर रहा है):
Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
switch (operator)
{
case "==":
return (v1==v2)?options.fn(this):options.inverse(this);
case "!=":
return (v1!=v2)?options.fn(this):options.inverse(this);
case "===":
return (v1===v2)?options.fn(this):options.inverse(this);
case "!==":
return (v1!==v2)?options.fn(this):options.inverse(this);
case "&&":
return (v1&&v2)?options.fn(this):options.inverse(this);
case "||":
return (v1||v2)?options.fn(this):options.inverse(this);
case "<":
return (v1<v2)?options.fn(this):options.inverse(this);
case "<=":
return (v1<=v2)?options.fn(this):options.inverse(this);
case ">":
return (v1>v2)?options.fn(this):options.inverse(this);
case ">=":
return (v1>=v2)?options.fn(this):options.inverse(this);
default:
return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
}
});यदि आप कई शर्तों की जांच करना चाहते हैं तो यहां एक समाधान है:
/* Handler to check multiple conditions
*/
Handlebars.registerHelper('checkIf', function (v1,o1,v2,mainOperator,v3,o2,v4,options) {
var operators = {
'==': function(a, b){ return a==b},
'===': function(a, b){ return a===b},
'!=': function(a, b){ return a!=b},
'!==': function(a, b){ return a!==b},
'<': function(a, b){ return a<b},
'<=': function(a, b){ return a<=b},
'>': function(a, b){ return a>b},
'>=': function(a, b){ return a>=b},
'&&': function(a, b){ return a&&b},
'||': function(a, b){ return a||b},
}
var a1 = operators[o1](v1,v2);
var a2 = operators[o2](v3,v4);
var isTrue = operators[mainOperator](a1, a2);
return isTrue ? options.fn(this) : options.inverse(this);
});उपयोग:
/* if(list.length>0 && public){}*/
{{#checkIf list.length '>' 0 '&&' public '==' true}} <p>condition satisfied</p>{{/checkIf}}यहाँ ब्लॉक हेल्पर I लिंक का उपयोग किया गया है: तुलना ब्लॉक हेल्पर । यह सभी मानक ऑपरेटरों का समर्थन करता है और आपको नीचे लिखे अनुसार कोड लिखने देता है। यह वास्तव में काफी आसान है।
{{#compare Database.Tables.Count ">" 5}}
There are more than 5 tables
{{/compare}}जिम के जवाब के समान लेकिन थोड़ी रचनात्मकता का उपयोग करके हम भी कुछ ऐसा कर सकते हैं:
Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {
var c = {
"eq": function( v1, v2 ) {
return v1 == v2;
},
"neq": function( v1, v2 ) {
return v1 != v2;
},
...
}
if( Object.prototype.hasOwnProperty.call( c, op ) ) {
return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
}
return options.inverse( this );
} );फिर इसका उपयोग करने के लिए हमें कुछ ऐसा मिलता है:
{{#compare numberone "eq" numbretwo}}
do something
{{else}}
do something else
{{/compare}}मैं बेहतर प्रदर्शन के लिए फ़ंक्शन को ऑब्जेक्ट से बाहर ले जाने का सुझाव दूंगा, लेकिन अन्यथा आप "और" और "या" सहित कोई भी तुलनात्मक फ़ंक्शन जोड़ सकते हैं।
एक अन्य विकल्प में फ़ंक्शन नाम का उपयोग करना है #if। यह #ifपता लगाएगा कि क्या पैरामीटर फंक्शन है और अगर ऐसा है तो वह इसे कॉल करेगा और सत्यता जांच के लिए इसकी वापसी का उपयोग करेगा। नीचे MyFunction को वर्तमान संदर्भ मिलता है this।
{{#if myFunction}}
I'm Happy!
{{/if}}दुर्भाग्य से इनमें से कोई भी समाधान "OR" ऑपरेटर "cond1 || cond2" की समस्या को हल नहीं करता है।
"^" (या) का उपयोग करें और जांचें कि क्या cond2 सच है
{{#if cond1}} DO ACTION {{^}} {{#if cond2}} DO ACTION {{/ if}} {{/ if}}
यह DRY नियम को तोड़ता है। तो इसे कम गन्दा करने के लिए आंशिक का उपयोग क्यों न करें
{{#if cond1}}
{{> subTemplate}}
{{^}}
{{#if cond2}}
{{> subTemplate}}
{{/if}}
{{/if}}मैं समझ सकता हूं कि आप उन परिस्थितियों के लिए एक सहायक क्यों बनाना चाहते हैं, जहां आपके टेम्पलेट के भीतर प्रदर्शन करने के लिए आपके पास बड़ी संख्या में विविध तुलनाएं हैं, लेकिन तुलनात्मक रूप से अपेक्षाकृत कम संख्या के लिए (या एक भी, जो मुझे इस पृष्ठ में लाया गया था) पहले स्थान पर), आपके व्यू-रेंडरिंग फ़ंक्शन कॉल में नए हैंडलबार्स चर को परिभाषित करना आसान होगा:
रेंडर पर हैंडलबार्स पास करें:
var context= {
'section1' : section1,
'section2' : section2,
'section1or2' : (section1)||(section2)
};और फिर आपके हैंडलबार टेम्पलेट के भीतर:
{{#if section1or2}}
.. content
{{/if}}मैं सादगी के लिए इसका उल्लेख करता हूं, और यह भी क्योंकि यह एक उत्तर है जो हैंडलबार्स के तर्कहीन स्वभाव का अनुपालन करते हुए त्वरित और सहायक हो सकता है।
नीचे दिए गए कमांड को चलाकर एम्बर ट्रूथ हेल्पर्स ऐडऑन स्थापित करें
एम्बर एम्बर-सत्य-सहायकों को स्थापित करें
आप अधिकांश लॉजिकल ऑपरेटर्स (eq, not-eq, not, and, and, gt, gte, lt, lte, xor) का उपयोग शुरू कर सकते हैं।
{{#if (or section1 section2)}}
...content
{{/if}}आप आगे जाने के लिए सब-डेप्रेशर को भी शामिल कर सकते हैं,
{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}
...content
{{/if}}फिर भी एक सहायक सहायक के लिए एक और कुटिल समाधान:
'?:' ( condition, first, second ) {
return condition ? first : second;
}
<span>{{?: fooExists 'found it' 'nope, sorry'}}</span>या एक साधारण मोटे सहायक:
'??' ( first, second ) {
return first ? first : second;
}
<span>{{?? foo bar}}</span>चूंकि इन पात्रों का हैंडलबार्स मार्कअप में कोई विशेष अर्थ नहीं है, इसलिए आप उन्हें हेल्पर नामों के लिए उपयोग करने के लिए स्वतंत्र हैं।
मुझे कॉफ़ीस्क्रिप्ट के साथ बनाया गया एक एनपीएम पैकेज मिला है जिसमें हैंडलबार्स के लिए बहुत सारे उपयोगी सहायक हैं। निम्नलिखित URL में दस्तावेज़ीकरण पर एक नज़र डालें:
https://npmjs.org/package/handlebars-helpers
आप wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgzउन्हें डाउनलोड करने और पैकेज की सामग्री को देखने के लिए एक कर सकते हैं ।
आप चीजों की तरह {{#is number 5}}या करने के लिए परेशान हो जाएगा{{formatDate date "%m/%d/%Y"}}
यदि आप केवल यह जांचना चाहते हैं कि क्या एक या दूसरा तत्व मौजूद है तो आप इस कस्टम हेल्पर का उपयोग कर सकते हैं
Handlebars.registerHelper('if_or', function(elem1, elem2, options) {
if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
return options.inverse(this);
} else {
return options.fn(this);
}
});इस तरह
{{#if_or elem1 elem2}}
{{elem1}} or {{elem2}} are present
{{else}}
not present
{{/if_or}}यदि आपको फ़ंक्शन रिटर्न मानों की तुलना करने के लिए "या" करने में सक्षम होना चाहिए, तो मैं एक और संपत्ति जोड़ना चाहूंगा जो वांछित परिणाम देता है।
सभी के बाद टेम्पलेट तर्कहीन होना चाहिए!
ऑब्जेक्ट गुण की तुलना करने में समस्या वाले लोगों के लिए, सहायक इस समाधान को जोड़ते हैं
बस इस पोस्ट पर गूगल सर्च से आया कि कैसे एक स्ट्रिंग दूसरे स्ट्रिंग के बराबर होती है।
मैं NodeJS सर्वर-साइड में HandlebarsJS का उपयोग करता हूं, लेकिन मैं इसे पार्स करने के लिए HandlebarsJS के ब्राउज़र संस्करण का उपयोग करके फ्रंट-एंड पर समान टेम्प्लेट फ़ाइलों का भी उपयोग करता हूं। इसका मतलब यह था कि अगर मैं एक कस्टम सहायक चाहता था, तो मुझे इसे 2 अलग-अलग जगहों पर परिभाषित करना होगा, या प्रश्न में ऑब्जेक्ट को एक फ़ंक्शन असाइन करना होगा - बहुत अधिक प्रयास !!
जो लोग भूल जाते हैं वह यह है कि कुछ वस्तुओं में विरासत के कार्य होते हैं जिनका उपयोग मूंछ के खाके में किया जा सकता है। एक स्ट्रिंग के मामले में:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.
हम इस पद्धति का उपयोग करके या nullतो मिलान कर सकते हैं, या यदि कोई मिलान नहीं मिला। यह एकदम सही है, क्योंकि HandlebarsJS प्रलेखन http://handlebarsjs.com/builtin_helpers.html को देख रहा है
You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.
इसलिए...
{{#if your_string.match "what_youre_looking_for"}}
String found :)
{{else}}
No match found :(
{{/if}}अपडेट करें:
सभी ब्राउज़रों पर परीक्षण के बाद, यह फ़ायरफ़ॉक्स पर काम नहीं करता है । HandlebarsJS एक फ़ंक्शन कॉल के लिए अन्य तर्क पास करता है, जिसका अर्थ है कि जब String.prototype.match कहा जाता है, तो दूसरा तर्क (यानी ऊपर दिए गए दस्तावेज़ के अनुसार मैच फ़ंक्शन कॉल के लिए Regexp झंडे) पास किया जा रहा है। फ़ायरफ़ॉक्स इसे String.prototyp.match के एक पदावनत उपयोग के रूप में देखता है, और इसलिए टूट जाता है।
एक स्ट्रिंग स्ट्रिंग JS ऑब्जेक्ट के लिए एक नया कार्यात्मक प्रोटोटाइप घोषित करना है , और इसके बजाय इसका उपयोग करना है:
if(typeof String.includes !== 'function') {
String.prototype.includes = function(str) {
if(!(str instanceof RegExp))
str = new RegExp((str+'').escapeRegExp(),'g');
return str.test(this);
}
}सुनिश्चित करें कि यह JS कोड आपके Handlebars.compile () फ़ंक्शन को चलाने से पहले शामिल किया गया है, फिर अपने टेम्पलेट में ...
{{#your_string}}
{{#if (includes "what_youre_looking_for")}}
String found :)
{{else}}
No match found :(
{{/if}}
{{/your_string}}यहां हमारे पास कई लॉजिकल && और || के लिए वेनिला हैंडलबार हैं (और या):
Handlebars.registerHelper("and",function() {
var args = Array.prototype.slice.call(arguments);
var options = args[args.length-1];
for(var i=0; i<args.length-1; i++){
if( !args[i] ){
return options.inverse(this);
}
}
return options.fn(this);
});
Handlebars.registerHelper("or",function() {
var args = Array.prototype.slice.call(arguments);
var options = args[args.length-1];
for(var i=0; i<args.length-1; i++){
if( args[i] ){
return options.fn(this);
}
}
return options.inverse(this);
}
// Results
// {{#and foo bar sally bob}} yup {{else}} nope {{/and}} // yup
// {{#or foo bar "" sally bob}} yup {{else}} nope {{/or}} // yup
// {{#and foo bar "" sally bob}} yup {{else}} nope {{/and}} // nope
// {{#or "" "" "" "" ""}} yup {{else}} nope {{/or}} // nopeयकीन नहीं है कि अगर यह "उपयोग करने के लिए" सुरक्षित है "और" और "या" ... शायद "op_and" और "op_or" जैसी किसी चीज़ में बदल जाए?
और / या के लिए सही समाधान
Handlebars.registerHelper('and', function () {
// Get function args and remove last one (function name)
return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});
Handlebars.registerHelper('or', function () {
// Get function args and remove last one (function name)
return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
}); फिर निम्नानुसार कॉल करें
{{#if (or (eq questionType 'STARTTIME') (eq questionType 'ENDTIME') (..) ) }}BTW: ध्यान दें कि यहां दिया गया समाधान गलत है, वह अंतिम तर्क को नहीं घटा रहा है जो कि फ़ंक्शन का नाम है। https://stackoverflow.com/a/31632215/1005607
उनका मूल और / या तर्क की पूरी सूची पर आधारित था
and: function () {
return Array.prototype.slice.call(arguments).every(Boolean);
},
or: function () {
return Array.prototype.slice.call(arguments).some(Boolean);
}क्या कोई उस उत्तर को बदल सकता है? मैंने सिर्फ 86 लोगों द्वारा सुझाए गए उत्तर में कुछ तय करने की कोशिश में एक घंटा बर्बाद किया। फिक्स अंतिम तर्क को फ़िल्टर करना है जो फ़ंक्शन नाम है।Array.prototype.slice.call(arguments, 0, arguments.length - 1)
इन 2 गाइड के बाद एक तरह से करने के लिए जाने-उन-परिभाषित-कस्टम निर्मित बाध्य-अगर-बयानों और कस्टम बाध्य सहायकों मैं पर इस पोस्ट में अपने साझा किए गए विचारों को समायोजित करने में सक्षम था stackoverflow मानक # के बजाय इसका उपयोग करने के लिए अगर बयान। यह वहाँ # # टॉस करने से अधिक सुरक्षित होना चाहिए।
उस gist में कस्टम बाउंड हेल्पर्स बकाया हैं।
<li>
<a href="{{unbound view.varProductSocialBlog}}">
{{#if-equal view.showDiv "true"}}<div>{{/if-equal}}<i class="fa fa-rss-square"></i>{{#if-equal view.showDiv "true"}}</div>{{/if-equal}}
{{#if-equal view.showTitle "true"}}Blog{{/if-equal}}
</a>
</li>मैं एम्बर क्लि का उपयोग कर रहा हूं अपने एम्बर एप्लिकेशन के निर्माण के प्रोजेक्ट ।
इस पोस्ट के समय वर्तमान सेटअप:
DEBUG: -------------------------------
DEBUG: Ember : 1.5.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 2.1.1
DEBUG: -------------------------------आप इसे नीचे दिखाए गए जैसे तार्किक ऑपरेटर का उपयोग करके कर सकते हैं:
{{#if (or(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}
{{#if (and(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}बंद करने से पहले यदि आप अपने व्यापार तर्क लिख सकते हैं
आप निम्नलिखित कोड का उपयोग कर सकते हैं:
{{#if selection1}}
doSomething1
{{else}}
{{#if selection2}}
doSomething2
{{/if}}
{{/if}}यहाँ मैं एम्बर 1.10 और एम्बर-क्ली 2.0 का उपयोग कर रहा हूं।
// app/helpers/js-x.js
export default Ember.HTMLBars.makeBoundHelper(function (params) {
var paramNames = params.slice(1).map(function(val, idx) { return "p" + idx; });
var func = Function.apply(this, paramNames.concat("return " + params[0] + ";"))
return func.apply(params[1] === undefined ? this : params[1], params.slice(1));
});फिर आप इसे इस तरह से अपने टेम्पलेट में उपयोग कर सकते हैं:
// used as sub-expression
{{#each item in model}}
{{#if (js-x "this.section1 || this.section2" item)}}
{{/if}}
{{/each}}
// used normally
{{js-x "p0 || p1" model.name model.offer.name}}कहाँ अभिव्यक्ति के तर्कों के रूप में पारित कर रहे हैं p0, p1, p2आदि और p0भी रूप में संदर्भित किया जा सकता this।