আংশিকভাবে হ্যান্ডেলবারগুলির মাধ্যমে ভেরিয়েবলগুলি পাস করা

Question

আমি বর্তমানে একটি এক্সপ্রেস.জেএস অ্যাপ্লিকেশনটিতে হ্যান্ডেলবার্স.জেগুলি নিয়ে কাজ করছি। জিনিসগুলিকে মডুলার রাখতে আমি আমার সমস্ত টেমপ্লেটগুলিকে পার্টিয়ালে বিভক্ত করি split

আমার সমস্যা : আমি আংশিক অনুরোধের মাধ্যমে ভেরিয়েবলগুলি পাস করার কোনও উপায় খুঁজে পাইনি। ধরা যাক আমার একটি আংশিক রয়েছে যা দেখতে এটির মতো দেখাচ্ছে:

<div id=myPartial>
    <h1>Headline<h1>
    <p>Lorem ipsum</p>
</div>

ধরে নেওয়া যাক আমি এই আংশিকটি 'মাই পার্টিশিয়াল' নামে নিবন্ধভুক্ত করেছি। অন্য টেমপ্লেটে আমি এর পরে কিছু বলতে পারি:

<section>
    {{> myPartial}}
</section>

এটি সূক্ষ্মভাবে কাজ করে, আংশিক প্রত্যাশা অনুযায়ী রেন্ডার করা হবে এবং আমি একজন খুশি বিকাশকারী। তবে আমার এখন যা দরকার তা হল এই অনুরোধটির মাধ্যমে বিভিন্ন ভেরিয়েবলগুলি পাস করার একটি উপায়, উদাহরণস্বরূপ একটি আংশিকের মধ্যে পরীক্ষা করা, যদি শিরোনাম দেওয়া হয় বা না। কিছুটা এইরকম:

<div id=myPartial>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem Ipsum</p>
</div>

এবং অনুরোধটির কিছু দেখতে হবে:

<section>
    {{> myPartial|'headline':'Headline'}}
</section>

অথবা তাই.

আমি জানি, আমি কোনও টেমপ্লেট রেন্ডার করার আগে আমার প্রয়োজনীয় সমস্ত ডেটা সংজ্ঞায়িত করতে সক্ষম। তবে আমার এটি করার একটি উপায় প্রয়োজন যেমন কেবল ব্যাখ্যা করা। কোন সম্ভাব্য উপায় আছে?

Answer 1

হ্যান্ডলবার্স পার্টিয়ালগুলি একটি দ্বিতীয় প্যারামিটার নেয় যা আংশিকের প্রসঙ্গে পরিণত হয়:

{{> person this}}

সংস্করণে v2.0.0 আলফা এবং তারপরে, আপনি নামযুক্ত পরামিতিগুলির একটি হ্যাশও পাস করতে পারেন:

{{> person headline='Headline'}}

আপনি এই পরিস্থিতিগুলির জন্য পরীক্ষাগুলি দেখতে পারেন: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462 https://github.com/wycats/handlebars ফোঁটা / e290ec24f131f89ddf2c6aeb707a4884d41c3c6d / বৈশিষ্ট / partials.js # L26-L32

Comments

এটি আপনার দৃশ্যে কীভাবে প্রযোজ্য তা অবিলম্বে পরিষ্কার নয়? আপনি কি সমাধানটি লিখতে পারেন - এটি আপনার ক্ষেত্রে প্রয়োগ করে, দয়া করে? ধন্যবাদ!

— সার্ভারম্যান

@ যিহুদা কাটজ প্রবেশের পরিবর্তে this, আপনি কি নিজের প্রসঙ্গে পাস করতে পারবেন? উদাহরণস্বরূপ, পাস করার জন্য অতিরিক্ত ডেটা সংজ্ঞায়িত করুন, যেমন {new_variable: some_data}?

— ত্রি এনগুইন

যদিও "এটি" তে পাস করার দক্ষতা থাকলেও এটি সর্বদা পর্যাপ্ত নয়। প্রায়শই একই পাতায় আপনি সম্ভবত এইচটিএমএল এর একটি নির্দিষ্ট টুকরো পুনরায় ব্যবহার করতে চান তবে আংশিক আইডি থাকলে আপনি বিনষ্ট হন ... একই আইডি একাধিকবার প্রদর্শিত হবে এবং অবৈধ হয়ে যাবে। এটি অত্যন্ত কার্যকর হবে যদি আপনি এটির অনুরোধ করার সময় পার্টিয়ালগুলিতে যুক্তিগুলি পাস করতে পারেন, এর সামগ্রীতে আরও কাস্টমাইজ করতে।

— জাভিয়ার_এক্স

হ্যান্ডলবারসের কোন সংস্করণ এটি সমর্থন করে? আমি ১.৩.০ ব্যবহার করছি এবং {{> partialName {new_variable: some_data} }}

— জেসন

@ বাফ্রোমকা সঠিক সমস্যাটি নির্ধারণ করেছেন যে আপনি স্বেচ্ছাচারিত তথ্যগুলি পাস করতে পারবেন না তবে কেবল একটি একক বস্তু। সুতরাং আপনি হয় এটি পাস করুন বা আপনি একটি নতুন সম্পত্তি তৈরি করুন যা নিয়ামক বা দৃশ্যে আপনার জাসন-ডেটা ফেরত দেয়। আমি দ্বিতীয় যে এটির আকারে ডেটা আংশিকভাবে পাস করা উচিত হওয়া উচিত key=value। গিথুব এ কি কোনও সমস্যা আছে?

— ওহসিবি

Answer 2

শুধু ক্ষেত্রে, আমি আংশিক আর্গুমেন্ট পেতে কি করেছি, ধরনের। আমি একটি সামান্য সহায়ক তৈরি করেছি যা একটি আংশিক নাম এবং প্যারামিটারগুলির একটি হ্যাশ নিয়ে যায় যা আংশিক হয়ে যাবে:

Handlebars.registerHelper('render', function(partialId, options) {
  var selector = 'script[type="text/x-handlebars-template"]#' + partialId,
      source = $(selector).html(),
      html = Handlebars.compile(source)(options.hash);

  return new Handlebars.SafeString(html);
});

এখানে মূল বিষয় হ্যান্ডলবারস সহায়করা তদন্তের রুবির মতো হ্যাশ গ্রহণ করে । সহায়ক কোডে তারা ফাংশনের শেষ যুক্তির অংশ হিসাবে আসে options- এর hashসদস্য হিসাবে। এইভাবে আপনি প্রথম যুক্তি — আংশিক নাম receive এবং তার পরে ডেটা পেতে পারেন get

তারপরে, আপনি সম্ভবত Handlebars.SafeStringসহায়িকার কাছ থেকে কোনও ফিরে আসতে চান বা "ট্রিপল ‑ স্ট্যাশ" ব্যবহার করতে চান - {{{- এটি ডাবল পলায়ন থেকে রোধ করতে।

এখানে কম-বেশি সম্পূর্ণ ব্যবহারের পরিস্থিতি রয়েছে:

<script id="text-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="text" id="{{id}}"/>
</script>

<script id="checkbox-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="checkbox" id="{{id}}"/>
</script>

<script id="form-template" type="text/x-handlebars-template">
  <form>
    <h1>{{title}}</h1>
    {{ render 'text-field' label="First name" id="author-first-name" }}
    {{ render 'text-field' label="Last name" id="author-last-name" }}
    {{ render 'text-field' label="Email" id="author-email" }}
    {{ render 'checkbox-field' label="Private?" id="private-question" }}
  </form>
</script>

আশা করি এটি… কেউ সাহায্য করবে। :)

Answer 3

আপনি যদি নিজের সহায়ককে লিখেন তবে এটি খুব সম্ভব। আমরা $এই জাতীয় মিথস্ক্রিয়া (এবং আরও) সম্পাদন করতে একটি কাস্টম সহায়ক ব্যবহার করছি :

/*///////////////////////

Adds support for passing arguments to partials. Arguments are merged with 
the context for rendering only (non destructive). Use `:token` syntax to 
replace parts of the template path. Tokens are replace in order.

USAGE: {{$ 'path.to.partial' context=newContext foo='bar' }}
USAGE: {{$ 'path.:1.:2' replaceOne replaceTwo foo='bar' }}

///////////////////////////////*/

Handlebars.registerHelper('$', function(partial) {
    var values, opts, done, value, context;
    if (!partial) {
        console.error('No partial name given.');
    }
    values = Array.prototype.slice.call(arguments, 1);
    opts = values.pop();
    while (!done) {
        value = values.pop();
        if (value) {
            partial = partial.replace(/:[^\.]+/, value);
        }
        else {
            done = true;
        }
    }
    partial = Handlebars.partials[partial];
    if (!partial) {
        return '';
    }
    context = _.extend({}, opts.context||this, _.omit(opts, 'context', 'fn', 'inverse'));
    return new Handlebars.SafeString( partial(context) );
});

Comments

পাস হওয়া যুক্তিগুলিতে অ্যাক্সেস পেতে আপনার তাদের 'হ্যাশ' অবজেক্ট: {{hash.foo}} অনুসন্ধান করা দরকার} (আমি হ্যান্ডেলবারগুলির সাথে নতুন এবং এটি বের করতে আমার কিছুটা সময় লেগেছে) - ধন্যবাদ, দুর্দান্ত সহায়ক!

— ক্লোদিও ব্রেডফেল্ড

দ্রষ্টব্য, এটির সাহায্যকারী ব্যবহারের আগে আপনার পার্টিয়ালগুলি প্রাক-সংকলন করা দরকার। আমি নোড.জেজে হ্যান্ডলবারগুলি ব্যবহার করছি এবং দেখেছি যে এটি সর্বদা হয় না (পার্টিশালগুলি চাহিদা অনুযায়ী সংকলিত হয়েছিল)। পার্টিয়ালগুলি লোড হওয়ার পরে আমাকে প্রাক-সংকলন করতে আমাকে একটি সাধারণ সহায়ক যুক্ত করতে হয়েছিল, তবে এটি দুর্দান্ত কাজ করেছে!

— ড্যান

@ আপনি কি সেই সাহায্যকারীকে ভাগ করে নিতে পারেন? :)

— টম

@ টম, এখানে এটি (কীভাবে এটি সুন্দরভাবে ফর্ম্যাট করবেন তা অনুধাবন করতে পারছেন না) দুঃখিত: hbs.registerPartials(path.join(__dirname, '/views/partials'), function() { utils.precompileHandlebarsPartials(hbs); }); // Pre compile the partials precompileHandlebarsPartials : function(hbs) { var partials = hbs.handlebars.partials; for (var partial in partials) { if (typeof partials[partial] === 'string') { partials[partial] = hbs.handlebars.compile(partials[partial]); } }; }

— ড্যান

@ ড্যান এটির নিজের উত্তর হিসাবে যুক্ত করা সম্ভবত আরও ভাল।

— অ্যালেক্স

Answer 4

এটি key=valueনোটেশনটি ব্যবহার করে হ্যান্ডেলবারগুলির পরবর্তী সংস্করণগুলিতেও করা যেতে পারে :

 {{> mypartial foo='bar' }}

আপনাকে আপনার আংশিক প্রসঙ্গে নির্দিষ্ট মানগুলি পাস করার অনুমতি দিচ্ছে।

রেফারেন্স: আংশিক # 182 এর জন্য প্রসঙ্গটি ভিন্ন

Comments

এটি সংস্করণ v2.0.0 আলফা থেকে শুরু হবে

— কেভিন সীমানা

Answer 5

আপনি যদি নিজের আংশিক ক্ষেত্রে অন্য একটি প্রসঙ্গ ব্যবহার করতে চান তবে গৃহীত উত্তরটি দুর্দান্ত কাজ করে। তবে এটি আপনাকে পিতামাতার কোনও প্রসঙ্গে উল্লেখ করতে দেয় না। একাধিক যুক্তি পাস করার জন্য আপনার নিজের সহায়কটি লিখতে হবে। হ্যান্ডলবার্সের জন্য এখানে একটি কার্যকারী সহায়ক 2.0.0(অন্য উত্তরগুলি সংস্করণগুলির জন্য কাজ করে <2.0.0):

Handlebars.registerHelper('renderPartial', function(partialName, options) {
    if (!partialName) {
        console.error('No partial name given.');
        return '';
    }
    var partial = Handlebars.partials[partialName];
    if (!partial) {
        console.error('Couldnt find the compiled partial: ' + partialName);
        return '';
    }
    return new Handlebars.SafeString( partial(options.hash) );
});

তারপরে আপনার টেমপ্লেটে আপনি এমন কিছু করতে পারেন:

{{renderPartial 'myPartialName' foo=this bar=../bar}}

এবং আপনার আংশিক ক্ষেত্রে, আপনি এই মানগুলি প্রসঙ্গে যেমন অ্যাক্সেস করতে সক্ষম হবেন:

<div id={{bar.id}}>{{foo}}</div>

Comments

আমি এই সংস্করণটি হ্যান্ডলবার্স 1.0.0 দিয়ে চেষ্টা করেছি এবং এটি নির্বিঘ্নে কাজ করেছে worked

— ক্রিস্টোফার লারকেন

'...' নামের আংশিকটির জন্য এই 'অনুসন্ধান' কোথায়?

— কেমাজেজিয়ান

Answer 6

আপনি যেমন কিছু করতে চান মনে হচ্ছে:

{{> person {another: 'attribute'} }}

ইহুদা আপনাকে ইতিমধ্যে এটি করার একটি উপায় দিয়েছে:

{{> person this}}

তবে স্পষ্ট করার জন্য:

আপনার আংশিকটিকে নিজস্ব ডেটা দেওয়ার জন্য এটি কেবলমাত্র বিদ্যমান মডেলের অভ্যন্তরে এটির নিজস্ব মডেল দিন:

{{> person this.childContext}}

অন্য কথায়, যদি এটি আপনার মডেলটি আপনি আপনার টেম্পলেটটিতে দিচ্ছেন:

var model = {
    some : 'attribute'
}

তারপরে আংশিকটিতে একটি নতুন অবজেক্ট যুক্ত করুন:

var model = {
    some : 'attribute',
    childContext : {
        'another' : 'attribute' // this goes to the child partial
    }
}

childContextইহুদা যেমন বলেছিলেন, তেমনই আংশিক প্রসঙ্গে পরিণত হয় - এতে কেবল ক্ষেত্রটি দেখায় another, তবে তা (বা ক্ষেত্রের যত্ন নেয় না some)। আপনি যদি idশীর্ষ স্তরের মডেলটিতে idথাকেন এবং চাইল্ড কনটেক্সটে আবার পুনরাবৃত্তি করেন তবে আংশিক কেবল ভিতরে কী রয়েছে তা দেখায় এটি ঠিকঠাক কাজ করবে childContext।

Answer 7

হ্যাঁ, আমি দেরি করেছিলাম তবে এসেম্বল ব্যবহারকারীদের জন্য আমি যুক্ত করতে পারি : আপনি বিল-ইন "parseJSON"হেল্পার http://assemble.io/helpers/helpers-data.html ব্যবহার করতে পারেন । ( Https://github.com/assemble/assemble/issues/416 এ আবিষ্কার হয়েছে )।

Answer 8

এটি সহায়ক কিনা তা নিশ্চিত না তবে গতিশীল পরামিতিগুলির সাথে হ্যান্ডলবার্স টেমপ্লেটের একটি উদাহরণ এখানে একটি ইনলাইন রেডিওব্যাটনের আংশিক এবং ক্লায়েন্টের (ব্রাউজার) পাত্রে রেডিও বোতামগুলি সরবরাহ করে।

আমার ব্যবহারের জন্য এটি সার্ভারে হ্যান্ডলবার্সের সাথে রেন্ডার হয়েছে এবং ক্লায়েন্টটি এটি শেষ করতে দেয়। এটির সাহায্যে একটি ফর্ম সরঞ্জাম হ্যান্ডলবারগুলির মধ্যে ইনলাইন ডেটা সরবরাহ করতে পারে।

দ্রষ্টব্য: এই উদাহরণটির জন্য jQuery প্রয়োজন

{{#*inline "RadioButtons"}}
{{name}} Buttons<hr>
<div id="key-{{{name}}}"></div>
<script>
  {{{buttons}}}.map((o)=>{
    $("#key-{{name}}").append($(''
      +'<button class="checkbox">'
      +'<input name="{{{name}}}" type="radio" value="'+o.value+'" />'+o.text
      +'</button>'
    ));
  });
  // A little test script
  $("#key-{{{name}}} .checkbox").on("click",function(){
      alert($("input",this).val());
  });
</script>
{{/inline}}
{{>RadioButtons name="Radio" buttons='[
 {value:1,text:"One"},
 {value:2,text:"Two"}, 
 {value:3,text:"Three"}]' 
}}