ল্যান্ডিকাল অপারেটরগুলিকে স্ট্যান্ডার্ড হ্যান্ডেলবার্স.জেএস শর্তসাপেক্ষ অপারেটরে অন্তর্ভুক্ত করার জন্য হ্যান্ডেলবার্স জেএসের কোনও উপায় আছে কি? এটার মতো কিছু:
{{#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);।
আপনারা যারা প্রান্তে বাস করেন তাদের জন্য এটি একটি খাঁজ ধরে নিন
গিস্ট : 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>আপনি যদি উচ্চ স্তরের স্কোপটি অ্যাক্সেস করতে চান তবে এটি কিছুটা আলাদা, অভিব্যক্তিটি সমস্ত যুক্তি, ব্যবহারের যোগসদৃশ: বলুন প্রসঙ্গে ডেটাটি এরকম দেখাচ্ছে:
// 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 এখানে মিথ্যা মানগুলি:
শর্তসাপেক্ষে একটি ব্লক রেন্ডার করতে আপনি এইফ সহায়কটি ব্যবহার করতে পারেন। যদি তার যুক্তিটি মিথ্যা, অপরিজ্ঞাত, নাল, "" বা [] (একটি "মিথ্যা" মান) দেয়, তবে কোনও 'কনড' (যেমন কনড 1 বা কনড 2) সত্য হিসাবে গণ্য হবে না।
এখানে পোস্ট করা সমস্ত উত্তরগুলির সাথে একটি সমস্যা হ'ল তারা সীমাবদ্ধ বৈশিষ্ট্যগুলির সাথে কাজ করে না, অর্থাত্ যখন সম্পত্তি পরিবর্তন হয় তখন শর্তটি পুনরায় মূল্যায়ন করা হয় না। এখানে সহায়তাকারী সমর্থনকারী বাইন্ডিংগুলির সামান্য আরও উন্নত সংস্করণ। এটি অ্যাম্বার উত্স থেকে বাইন্ড ফাংশন ব্যবহার করে , যা সাধারণ অ্যাম্বার সহায়ককে প্রয়োগ করতেও ব্যবহৃত হয় #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}}উন্নত সমাধান যা মূলত কোনও বাইনারি অপারেটরের সাথে কাজ করে (কমপক্ষে সংখ্যা, স্ট্রিংগুলি ভালভাবে কাজ করে না, ব্যবহারকারীর ইনপুটগুলির সাথে একটি নির্দিষ্ট সংখ্যক অপারেটর ব্যবহার করে পজিবল স্ক্রিপ্ট ইনজেকশনের যত্ন নিন):
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}}: এখানে ব্লক সাহায্যকারী আমি ব্যবহার করার জন্য একটি লিঙ্ক তুলনা ব্লক সাহায্যকারী । এটি সমস্ত স্ট্যান্ডার্ড অপারেটরকে সমর্থন করে এবং নীচে প্রদর্শিত হিসাবে কোড লিখতে দেয়। এটা সত্যিই বেশ সহজ।
{{#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নির্ণয় করতে পারবে যদি প্যারামিটার ফাংশন এবং এটি যদি তারপর এটা কল এবং truthyness চেক জন্য তার আগমন ব্যবহার করবে। আমার ফাংশনের নীচে বর্তমান প্রসঙ্গটি পাওয়া যায় this।
{{#if myFunction}}
I'm Happy!
{{/if}}দুর্ভাগ্যক্রমে এই সমাধানগুলির কোনওটিই "OR" অপারেটর "কনড 1 || কনড 2" এর সমস্যা সমাধান করে না।
"^" (বা) ব্যবহার করুন এবং কনড 2 সত্য কিনা তা পরীক্ষা করুন
if {#if কনড 1}} ক্রিয়াটি করুন {{^}} {{#if কনড 2}} ক্রিয়াটি করুন {{/ যদি}} {{/ যদি}}
এটি ডিআরওয়াই বিধি ভঙ্গ করে। সুতরাং কেন এটি কম অগোছালো করতে আংশিক ব্যবহার করবেন না
{{#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, এবং, বা, gt, gte, lt, lte, xor)।
{{#if (or section1 section2)}}
...content
{{/if}}আপনি আরও যেতে subexpression অন্তর্ভুক্ত করতে পারেন,
{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}
...content
{{/if}}ত্রিনিয়ার হেল্প্পারের জন্য আরও একটি কুটিল সমাধান:
'?:' ( condition, first, second ) {
return condition ? first : second;
}
<span>{{?: fooExists 'found it' 'nope, sorry'}}</span>বা একটি সহজ coalesce সহায়ক:
'??' ( first, second ) {
return first ? first : second;
}
<span>{{?? foo bar}}</span>যেহেতু এই অক্ষরগুলির হ্যান্ডেলবার্স মার্কআপের কোনও বিশেষ অর্থ নেই, তাই আপনি এগুলিকে সহায়তার জন্য ব্যবহার করতে পারেন।
আমি কফিস্ক্রিপ্ট দিয়ে তৈরি একটি এনপিএম প্যাকেজ পেয়েছি যাতে হ্যান্ডলবারগুলির জন্য প্রচুর অবিশ্বাস্য দরকারী সহায়ক রয়েছে। নিম্নলিখিত ইউআরএলে ডকুমেন্টেশনটি একবার দেখুন:
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}}ফাংশন রিটার্ন মানগুলির তুলনা করতে যদি আপনার কাছে "বা" থাকতে সক্ষম হতে হয় তবে আমি বরং আরও একটি সম্পত্তি যুক্ত করব যা পছন্দসই ফলাফলটি দেয়।
টেমপ্লেটগুলি সর্বোপরি যুক্তিহীন হওয়া উচিত!
যাঁরা অবজেক্ট প্রোপার্টি তুলনা করতে সমস্যা করছেন তাদের সহায়তার ভিতরে এই দ্রবণটি যুক্ত করুন
Ember.js সাহায্যকারী কোনও প্যারামিটারটি সঠিকভাবে স্বীকৃতি দিচ্ছে না
একটি স্ট্রিং অন্য স্ট্রিংয়ের সমান কিনা তা পরীক্ষা করে দেখুন কীভাবে গুগল অনুসন্ধান থেকে এই পোস্টে এসেছিলেন।
আমি নোডেজেএস সার্ভার-সাইডে হ্যান্ডলেবারসজেএস ব্যবহার করি তবে হ্যান্ডলবারসজেএস এর ব্রাউজার সংস্করণটি পার্স করার জন্য আমি সামনের প্রান্তে একই টেম্পলেট ফাইলগুলি ব্যবহার করি। এর অর্থ হ'ল আমি যদি কাস্টম সহায়ক চাইতাম তবে আমাকে এটি 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যদি কোনও মিল খুঁজে পাওয়া যায় নি। এটি নিখুঁত, কারণ হ্যান্ডলবার্সজেএস ডকুমেন্টেশনটি 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}}হালনাগাদ:
সমস্ত ব্রাউজারে পরীক্ষা করার পরে, এটি ফায়ারফক্সে কাজ করে না । হ্যান্ডলেবারসজেএস অন্য আর্গুমেন্টকে একটি ফাংশন কলে পাঠায়, যার অর্থ যখন স্ট্রিং.প্রোটোটাইপ.ম্যাচ বলা হয় তখন দ্বিতীয় যুক্তি (যেমন উপরের ডকুমেন্টেশন অনুসারে ম্যাচ ফাংশন কলের জন্য রেজিপ্লেক্স পতাকাগুলি) পাস করা হয় বলে মনে হয়। ফায়ারফক্স এটিকে স্ট্রিং.প্রোটোটাইপ.ম্যাচ এর অবচয় ব্যবহার হিসাবে দেখে এবং তাই বিরতিতে।
একটি কাজের ভিত্তিতে স্ট্রিং জেএস বস্তুর জন্য একটি নতুন কার্যকরী প্রোটোটাইপ ঘোষণা করা এবং পরিবর্তে এটি ব্যবহার করা হয়:
if(typeof String.includes !== 'function') {
String.prototype.includes = function(str) {
if(!(str instanceof RegExp))
str = new RegExp((str+'').escapeRegExp(),'g');
return str.test(this);
}
}নিশ্চিত করুন যে আপনি এই জেএস কোডটি অন্তর্ভুক্ত করেছেন আপনার হ্যান্ডলেবার্স.কম ফাইল () ফাংশনটি চালানোর আগে , তারপরে আপনার টেমপ্লেটে ...
{{#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এটি "নিরাপদ" "ব্যবহার" এবং "এবং" বা "... সম্ভবত" অপ_অ্যান্ড "এবং" অপ_অর "এর মতো কোনও কিছুর পরিবর্তিত হবে তা নিশ্চিত না?
AND / 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') (..) ) }}বিটিডাব্লু: নোট করুন যে এখানে দেওয়া সমাধানটি ভুল, তিনি শেষ যুক্তিটি বিয়োগ করছেন না যা ফাংশনটির নাম। 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 মান # পরিবর্তে ব্যবহার করতে যদি বিবৃতি। এটি সেখানে কেবল # টসিংয়ের চেয়ে আরও সুরক্ষিত হওয়া উচিত।
সেই সূত্রে কাস্টম সীমাবদ্ধ সহায়করা অসামান্য।
<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 (if firstCondition firstCondition secondCondition)}}
(firstCondition || (or) secondCondition) === true
{{/if}}আপনি নীচের দেখানো মত লজিকাল অপারেটরটি ব্যবহার করে এটি সহজভাবে করতে পারেন:
{{#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 এবং অ্যাম্বার-ক্লিপ ২.০ ব্যবহার করছি এমন একটি দৃষ্টিভঙ্গি এখানে।
// 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।