হ্যান্ডলবারে কীভাবে বস্তুর অ্যারে নিয়ে পুনরাবৃত্তি হবে?

Question

এটি একটি নির্বোধ প্রশ্ন মনে হতে পারে তবে আমি উত্তর কোথাও খুঁজে পাচ্ছি না।

আমি এই ওয়েব এপিআই হিট করছি যা JSON ফর্ম্যাটে অবজেক্টগুলির একটি অ্যারে প্রদান করে:

হ্যান্ডলবার্স ডক্স নিম্নলিখিত উদাহরণটি দেখায়:

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

এর প্রেক্ষাপটে:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

আমার ক্ষেত্রে অ্যারের জন্য আমার কোনও নাম নেই, এটি প্রতিক্রিয়াটির কেবল মূল অবজেক্ট। আমি {{#each}}কোন ভাগ্য না দিয়ে ব্যবহার করার চেষ্টা করেছি ।

প্রথমবার হ্যান্ডলবার্স ব্যবহার করে ... আমি কী মিস করছি?

হালনাগাদ

আমি কী জিজ্ঞাসা করছি তা দেখানোর জন্য এখানে একটি সরলিকৃত ফ্রিডল রয়েছে: http://jsfiddle.net/KPCh4/2/

হ্যান্ডেলবারগুলি কি প্রাসঙ্গিক ভেরিয়েবলটি একটি বস্তু হতে হবে এবং অ্যারে নয়?

Comments

আপনি কীভাবে এপিআই ফলাফলগুলি টেমপ্লেটে ( বর্তমানে ) পাস করবেন ?

— গ্যাব্রিয়েল পেট্রিওলি

@ গ্যাবাইকাজি.পেট্রোলি এপিআই আমার নয়, এটিতে আমার কোনও নিয়ন্ত্রণ নেই। আমি কেবল jQuery আজাক্স ব্যবহার করছি এবং প্রতিক্রিয়া অবজেক্ট পাচ্ছি, যা বস্তুর একটি অ্যারে।

— এমজারো

Answer 1

আপনি thisপ্রতিটি ব্লকে পাস করতে পারেন । এখানে দেখুন: http://jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

Comments

তারপরে কি {{#each people}}অভ্যন্তরীণ লুপের অভ্যন্তরের বাইরের লুপের সূচক নম্বরটি কল করা সম্ভব {{#each this}}? লাইক{{people@index}}

— রেগারবয়

Answer 2

এই ফ্রিডল উভয় eachএবং সরাসরি জসন রয়েছে। http://jsfiddle.net/streethawk707/a9ssja22/ ।

নীচে অ্যারেতে পুনরাবৃত্তি হওয়ার দুটি উপায় রয়েছে। একটি হ'ল ডাইরেক্ট জসন পাসিং সহ এবং অন্যটি কনটেন্ট হোল্ডারে যাওয়ার সময় জসন অ্যারে নামকরণ করছে।

উদাহরণস্বরূপ: নীচের উদাহরণটি ছোট_ডাটা ভেরিয়েবলের অভ্যন্তরে সরাসরি জসন কী (ডেটা) কল করছে।

এইচটিএমএলে নীচের কোডটি ব্যবহার করুন:

<div id="small-content-placeholder"></div>

নীচে শিরোনাম বা এইচটিএমএল এর মূল অংশে স্থাপন করা যেতে পারে:

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

নীচে একটি নথি প্রস্তুত রয়েছে:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

নীচে জাসন:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" }
            ]
        };

অবশেষে বিষয়বস্তুধারীর সাথে জসন সংযুক্ত করুন:

$("#small-content-placeholder").html(small_template(small_data));

ডিম 2: প্রতিটি ব্যবহার করে Iteration।

নীচের জসন বিবেচনা করুন।

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "[e-mail]" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "[e-mail]" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" }
                  ]
            }
      ];

বিষয়বস্তুধারীর কাছে জসন পাস করার সময় কেবল এটির নাম দিন:

$("#big-content-placeholder").html(big_template({big_data:big_data}));

এবং টেমপ্লেটটি দেখে মনে হচ্ছে:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Comments

কীভাবে একজন গল্প হ্যান্ডেলবারগুলি ব্যবহার করে এটি সংকলন করে?

— ওয়েবকিটফ্যানজ

Answer 3

আমি বলতে template()চাইছিলাম ..

আপনাকে কেবল অবজেক্ট হিসাবে ফলাফলগুলি পাস করতে হবে। সুতরাং কল করার পরিবর্তে

var html = template(data);

করা

var html = template({apidata: data});

এবং {{#each apidata}}আপনার টেম্পলেট কোড ব্যবহার করুন

http://jsfiddle.net/KPCh4/4/ এ ডেমো
( ক্র্যাশ হওয়া কিছু বাকী ifকোড সরানো হয়েছে )

Comments

এটি দুর্দান্ত, তবে এজেড উত্তরটি আরও ভাল। ব্যবহার {{#each this}}করা সঠিক ফর্ম।

— এমজারো

প্রকৃতপক্ষে, এই উপায়টি আরও বেশি অর্থবোধ করে, ধন্যবাদ!

— উহু

Answer 4

হ্যান্ডলবারগুলি প্রসঙ্গ হিসাবে একটি অ্যারে ব্যবহার করতে পারে। আপনি .ডেটা রুট হিসাবে ব্যবহার করতে পারেন । সুতরাং আপনি আপনার অ্যারের ডেটা দিয়ে লুপ করতে পারেন {{#each .}}।

var data = [
  {
    Category: "General",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      }
    ]
  },
  {
    Category: "Minutes"
  }
];

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  {{#each .}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}}</p>
        {{/DocumentList}}
      </div>
    </div>
  {{/each}}
  </div>
</script>

Answer 5

ব্যবহার thisএবং {{this}}। নোড.জেএস-এর নীচে কোড দেখুন:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

কনসোল লগ আউটপুট:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>