Handlebars.js অন্যথায় যদি

Question

আমি ক্লায়েন্ট সাইড ভিউ রেন্ডারিংয়ের জন্য Handlebars.js ব্যবহার করছি। যদি অন্যটি দুর্দান্ত কাজ করে তবে আমি একটি 3 উপায় শর্তসাপেক্ষে মুখোমুখি হয়েছি যার জন্য ELSE IF প্রয়োজন:

এটি কাজ করে না:

{{#if FriendStatus.IsFriend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

হ্যান্ডেলবারগুলি সহ আমি কীভাবে ELSE করব?

Comments

হ্যান্ডেলবারগুলির আপডেটগুলিতে নজর রাখুন, মনে হচ্ছে এটি শীঘ্রই বাস্তবায়িত হবে: github.com/wycats/handlebars.js/pull/892

— জ্যাকব ভ্যান

Answer 1

{{else if}}হ্যান্ডলেবারগুলি 3.0.0.0 হিসাবে ব্লকগুলিকে সমর্থন করে ।

হ্যান্ডলবারগুলি v3.0.0 বা ততোধিক:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

হ্যান্ডলবার্স v3.0.0 এর আগে, তবে আপনাকে কোনও সহায়ককে সংজ্ঞায়িত করতে হবে যা ব্রাঞ্চিং যুক্তি বা নীড়ের ifবিবৃতিগুলি ম্যানুয়ালি পরিচালনা করে :

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

Comments

হ্যান্ডেলবারগুলিতে একটি এলসিফ (বা অন্যথায় যদি) না রাখার বিষয়টি আপনি নিজের টেম্পলেটে অনেক বেশি যুক্তি যুক্ত করছেন। অন্য কথায়, আপনার এটিকে ছোট টেম্পলেটগুলিতে ভাঙতে হবে?

— কাজিম জায়েদী

@ কাজিমজাইদী, আপনার যদি তিনটিরও বেশি রাজ্যের সাথে একক টুকরো ডেটা থাকে যা প্রতিটি ক্ষেত্রে বিভিন্ন ফর্ম্যাটের প্রয়োজন? আপনি নিজেই ডেটাতে সিএসএস স্টাইল জোর করতে সক্ষম হতে পারেন তবে তারপরে আপনি নিজের ডেটাতে দর্শন-স্তরের উদ্বেগকে চাপ দিচ্ছেন। আমি যদি / অন্যটিফ / এন্ডিফ কনস্ট্রাক্ট (বা এমনকি একটি স্যুইচ / ম্যাচ) এর জন্য বুদ্ধিমান কেসগুলি কল্পনা করতে পারি।

— ড্রয় নোকস

এটি আবার দেখার জন্য, আমি অনুভব করি এটি অ্যাট্রিবিউট বাইন্ডিংয়ের মাধ্যমে করা যেতে পারে।

— কাজিম জায়েদী

আমি মনে করি পছন্দসই পদ্ধতি হ'ল বুলিয়ান পতাকা উত্তোলন এবং এগুলি শর্তযুক্ত করা। পতাকাগুলি সঠিকভাবে সেট করা আপনার একমাত্র শর্তটি সত্য হিসাবে মূল্যায়ন করে। কোনও প্রয়োজন নেইelse if

— ছবি

আমি আপনাকে সুপারিশ করব যে আপনি আপনার ব্যবসায়িক যুক্তি উপস্থাপনা থেকে পৃথক করার জন্য একটি সহায়ক ফাংশন দিয়ে এটি করুন।

— ম্যাক্স হজস

Answer 2

আমি সাধারণত এই ফর্মটি ব্যবহার করি:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

Comments

ভাল টিপস, ধন্যবাদ। এটি কি পূর্বনির্ধারিতভাবে প্রতিক্রিয়াশীল হবে?

— kylemclaren

অন্য 1 টির সাথে দেখতে খুব সুন্দর {{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— লাগছে

না, এটি "ক্লিনার" নয় এটি খারাপ।

— জিন খ।

Answer 3

হ্যান্ডেলবারগুলি এখন {{else if}}3.0.0.0 হিসাবে সমর্থন করে । সুতরাং, আপনার কোড এখন কাজ করা উচিত।

আপনি "শর্তসাপেক্ষ" এর অধীনে একটি উদাহরণ দেখতে পাবেন (একটি সংযোজন সহ এখানে কিছুটা সংশোধিত {{else}}:

    {{#if isActive}}
      <img src="star.gif" alt="Active">
    {{else if isInactive}}
      <img src="cry.gif" alt="Inactive">
    {{else}}
      <img src="default.gif" alt="default">
    {{/if}}

http://handlebarsjs.com/block_helpers.html

Comments

এটি নতুন উত্তর হওয়া উচিত!

— সাদ মালিক

আমার জন্য কাজ করে না (টেমপ্লেটে সিনট্যাক্স ত্রুটি)। উল্কা 1.2.0.2

— ড্রাগনম্নল

@dragonmnl হ্যান্ডলবার্সের কোন সংস্করণটি উল্কা 1.2.0.2 ব্যবহার করছে? আপনি 3.0 ব্যবহার করছেন তা নিশ্চিত করুন।

— ডন ও

আমি ডিফল্ট সংস্করণ ব্যবহার করছি। আমি হ্যান্ডেলবার সংস্করণটি কীভাবে চেক করব?

— ড্রাগনম্নল

@dragonmnl দেখে মনে হচ্ছে উল্কাগুলি স্পেসবার্স নামে নিজস্ব টেম্পলেট ভাষা ব্যবহার করে । যদি এটি হয় তবে আমি নিশ্চিত নই যে এটি {{else if}}সিনট্যাক্সকে সমর্থন করে ।

— ডন ও

Answer 4

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

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

আপনি আপনার মডেলটিতে জিনিসগুলি সাজিয়ে রাখতে চাইতে পারেন যাতে আপনি এটি পেতে পারেন,

{{#if is_friend }}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}

{{#if is_not_friend_yet }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}

{{#if will_never_be_my_friend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

কেবলমাত্র নিশ্চিত হয়ে নিন যে এই পতাকাগুলির মধ্যে কেবল একটিই সত্য। সম্ভাবনাগুলি হ'ল, যদি আপনি if/elsif/elseএটি নিজের দৃষ্টিতে ব্যবহার করে থাকেন তবে আপনি সম্ভবত এটি অন্য কোথাও ব্যবহার করছেন, সুতরাং এই পরিবর্তনগুলি অতিরিক্তের প্রয়োজনে শেষ না হয়।

এটি সরু রাখুন।

Comments

আমি নিশ্চিত না যে এটি একটি অনুশীলনের কতটা ভাল, তবে এটি আজ আমার জন্য 3 টি ভিন্ন দৃষ্টিভঙ্গি রাজ্য পরিচালনা করে এসেছিল এবং আমি এই ভিত্তিতে একটি সমাধান ব্যবহার করে শেষ করেছি (তারা অন্য যুক্তিটি প্রয়োজনীয় নয় যেহেতু তারা সবগুলি বিরুদ্ধে পরীক্ষা করছে এক মান) stackoverflow.com/questions/15008564/... সুতরাং, পরিবর্তে _is_friend #if, আপনি একটি স্ট্রিং একটি খুব সহজ সাহায্যকারী সঙ্গে (তাদের উত্তর ব্যবহার করতে পারেন); # যদি বন্ধু_প্রকার "হয়_বান্ধব" এবং # যদি বন্ধু_প্রকার "is_not_friend_yet"

— ডিলান রেইচ

এই উত্তরটি আমি হ্যান্ডেলবার্স পূর্বের সেরা সমাধানটি consider.০ বিবেচনা করব, আমি মনে করি যে ডিওএম ট্রিতে যুক্তি ছড়িয়ে দেওয়ার চেষ্টা করার চেয়ে অতিরিক্ত এইচটিএমএল আরও ভাল is

— ডেভিড ও'রেগান

Answer 5

আমি এই সহজ সহায়ক লিখেছি:

Handlebars.registerHelper('conditions', function (options) {
    var data = this;
    data.__check_conditions = true;
    return options.fn(this);
});


Handlebars.registerHelper('next', function(conditional, options) {
  if(conditional && this.__check_conditions) {
      this.__check_conditions = false;
      return options.fn(this);
  } else {
      return options.inverse(this);
  }
});

এটা তোলে এর ভালো কিছু দায়িত্ব চেইন মধ্যে প্যাটার্ন handlebars

উদাহরণ:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

এটি অন্য কিছু নয় তবে কিছু ক্ষেত্রে এটি আপনাকে সহায়তা করতে পারে)

Answer 6

বিল্ট-ইন হেল্পার্স

#if

শর্তসাপেক্ষে একটি ব্লক রেন্ডার করতে আপনি যদি সহায়তা সহায়ক ব্যবহার করতে পারেন। যদি এর যুক্তিটি মিথ্যা, অপরিজ্ঞাত, নাল, "", 0, বা [] প্রত্যাবর্তন করে, হ্যান্ডলবারগুলি ব্লকটি রেন্ডার করবে না।

টেমপ্লেট

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

যখন আপনি উপরের টেমপ্লেটে নিম্নলিখিত ইনপুটটি পাস করেন

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

Answer 7

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

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>