প্রশ্নের শিরোনামে যেমন বলা হয়েছে, কোনও বস্তুর বৈশিষ্ট্যগুলির মধ্য দিয়ে লুপিংয়ের গোঁফ / হ্যান্ডেলবারগুলি কী আছে ?
তাই দিয়ে
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
}আমি কি তখন টেমপ্লেট ইঞ্জিনে এমন কিছু করতে পারি যা এর সমতুল্য হবে
for(var prop in o)
{
// with say, prop a variable in the template and value the property value
}?
উত্তর:
Handlebars.js এ এই কার্যকারিতাটির জন্য সমর্থন যুক্ত করা হয়েছে , সুতরাং বাহ্যিক সহায়কদের আর কোনও প্রয়োজন নেই।
অ্যারেগুলির জন্য:
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}বস্তুর জন্য:
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}মনে রাখবেন যে কেবলমাত্র hasOwnPropertyপরীক্ষায় উত্তীর্ণ বৈশিষ্ট্যগুলি গণনা করা হবে।
{{#each this}}। আপনার শর্তাদির পছন্দটিও বিভ্রান্তিকর (কোনও বিষয়টিকে "শীর্ষ স্তর" করে তোলে এবং অন্যটি কী না "প্রাক-সংজ্ঞায়িত" কীগুলি হুবহু? ইত্যাদি) তাই আপনি এই ধারণাগুলি পুনরায় দেখাতে চাইতে পারেন।
সহায়ক হিসাবে এটি বাস্তবায়িত করা বেশ সহজ:
Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
for(var prop in context)
{
ret = ret + options.fn({property:prop,value:context[prop]});
}
return ret;
});তারপরে এটির মতো ব্যবহার করুন:
{{#eachProperty object}}
{{property}}: {{value}}<br/>
{{/eachProperty }}সম্পাদনা: হ্যান্ডলবারগুলির এখন এটি সম্পাদনের একটি অন্তর্নির্মিত উপায় রয়েছে; উপরে নির্বাচিত উত্তর দেখুন । সরল গোঁফের সাথে কাজ করার সময়, নীচেরটি এখনও প্রয়োগ হয়।
গোঁফ অ্যারেতে আইটেমগুলি নিয়ে পুনরাবৃত্তি করতে পারে। সুতরাং আমি গোঁফগুলি যেভাবে কাজ করতে পারে সেভাবে ফর্ম্যাট করে একটি পৃথক ডেটা অবজেক্ট তৈরি করার পরামর্শ দেব:
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
},
mustacheFormattedData = { 'people' : [] };
for (var prop in o){
if (o.hasOwnProperty(prop)){
mustacheFormattedData['people'].push({
'key' : prop,
'value' : o[prop]
});
}
}এখন, আপনার গোঁফ টেমপ্লেট এমন কিছু হবে:
{{#people}}
{{key}} : {{value}}
{{/people}}এখানে "খালি খালি তালিকাগুলি" বিভাগটি দেখুন: https://github.com/janl/mustache.js
এটি অ্যাম্বারের সাথে ব্যবহারের জন্য @ বেনের উত্তর আপডেট হয়েছে ... নোট আপনাকে ব্যবহার করতে হবে Ember.getকারণ স্ট্রিং হিসাবে প্রসঙ্গটি পাস হয়েছে।
Ember.Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
var newContext = Ember.get(this, context);
for(var prop in newContext)
{
if (newContext.hasOwnProperty(prop)) {
ret = ret + options.fn({property:prop,value:newContext[prop]});
}
}
return ret;
});টেমপ্লেট:
{{#eachProperty object}}
{{key}}: {{value}}<br/>
{{/eachProperty }}@ অমিতের উত্তরটি ভাল কারণ এটি গোঁফ এবং হ্যান্ডলবার উভয় ক্ষেত্রেই কাজ করবে।
কেবলমাত্র হ্যান্ডলবার্স-সমাধান হিসাবে, আমি কয়েকটি দেখেছি এবং আমি https://gist.github.com/1371586each_with_key এ ব্লক সহায়কটি পছন্দ করি ।
'key', অথবা 'property'ইত্যাদিবেনের সমাধানের জন্য ধন্যবাদ, আমার ব্যবহারের ক্ষেত্রে কেবলমাত্র নির্দিষ্ট ক্ষেত্রগুলি ক্রমে প্রদর্শন করতে
বস্তু সহ
কোড:
handlebars.registerHelper('eachToDisplayProperty', function(context, toDisplays, options) {
var ret = "";
var toDisplayKeyList = toDisplays.split(",");
for(var i = 0; i < toDisplayKeyList.length; i++) {
toDisplayKey = toDisplayKeyList[i];
if(context[toDisplayKey]) {
ret = ret + options.fn({
property : toDisplayKey,
value : context[toDisplayKey]
});
}
}
return ret;
});উত্স অবজেক্ট:
{ locationDesc:"abc", name:"ghi", description:"def", four:"you wont see this"}টেমপ্লেট:
{{#eachToDisplayProperty this "locationDesc,description,name"}}
<div>
{{property}} --- {{value}}
</div>
{{/eachToDisplayProperty}}আউটপুট:
locationDesc --- abc
description --- def
name --- ghiএটি গোঁফজেজেএসের জন্য একটি সহায়ক ফাংশন, ডেটাটির পূর্ব-বিন্যাস ছাড়াই এবং রেন্ডারের সময় তা না পেয়ে।
var data = {
valueFromMap: function() {
return function(text, render) {
// "this" will be an object with map key property
// text will be color that we have between the mustache-tags
// in the template
// render is the function that mustache gives us
// still need to loop since we have no idea what the key is
// but there will only be one
for ( var key in this) {
if (this.hasOwnProperty(key)) {
return render(this[key][text]);
}
}
};
},
list: {
blueHorse: {
color: 'blue'
},
redHorse: {
color: 'red'
}
}
};টেমপ্লেট:
{{#list}}
{{#.}}<span>color: {{#valueFromMap}}color{{/valueFromMap}}</span> <br/>{{/.}}
{{/list}}আউটপুট:
color: blue
color: red(অর্ডার এলোমেলো হতে পারে - এটি একটি মানচিত্র) আপনি যদি চান মানচিত্রের উপাদানটি জানেন তবে এটি কার্যকর হতে পারে। জালিয়াতিপূর্ণ মূল্যবোধগুলির জন্য কেবল নজর রাখুন।