আন্ডারস্কোর.জেএস টেম্পলেটগুলিতে বিবৃতি কীভাবে ব্যবহার করবেন?


239

আমি আন্ডারস্কোর.জেএস টেম্প্লেটিং ফাংশনটি ব্যবহার করছি এবং এটির মতো একটি টেম্পলেট করেছি:

<script type="text/template" id="gridItem">
    <div class="griditem <%= gridType %> <%= gridSize %>">
        <img src="<%= image %>" />
        <div class="content">
            <span class="subheading"><%= categoryName %></span>
            <% if (date) { %><span class="date"><%= date %></span><% }  %>
            <h2><%= title %></h2>
        </div>
    </div>
</script>

আপনি দেখতে পাচ্ছেন যে আমার সেখানে একটি আইফোন বিবৃতি রয়েছে কারণ আমার সমস্ত মডেলের তারিখের প্যারামিটার থাকবে না। তবে এটি করার এই উপায়টি আমাকে একটি ত্রুটি দেয় date is not defined। সুতরাং, টেমপ্লেটের মধ্যে বিবৃতিগুলি কীভাবে করব?

উত্তর:


442

এই কৌতুক করতে হবে:

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>

মনে রাখবেন আন্ডারস্কোর.জেএস টেম্পলেটগুলিতে ifএবং ট্যাগগুলিতে forমোড়ানো কেবলমাত্র স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট সিনট্যাক্স <% %>


2
দুর্দান্ত কাজ করে এবং সন্ধান পেয়েছে যে জেএস স্যুইচ / কেস স্টেটমেন্টগুলিও টেম্পলেট মার্কআপে খুব সুন্দরভাবে কাজ করে।
নিকব

দুর্দান্ত উত্তর। আপনি যখন দয়া করে টেম্পলেটগুলি ব্যবহার করছেন তখন আমি কীভাবে বিকল্প ক্লাস ব্যবহার করতে পারি তা দয়া করে বলতে পারেন? প্রথমের মতো <li> ক্লাসটি এক এবং পরের খ পাওয়া উচিত?
ব্ল্যাকডাইভাইন

4
@ ব্ল্যাকডাইভাইন আমি জানি এটি এক ধরণের দেরি, তবে বিকল্প শৈলীর জন্য আপনার ব্যবহার করা উচিত :nth-child(even)এবং :nth-child(odd)সিএসএস নির্বাচকগুলি, আপনার টেম্পলেটটি পরিবর্তন করবেন না।
48 এ দোয়া'র প্রার্থনা

এটি জাভা স্ক্রিপ্টলেটগুলির মতো দেখতে যেমন জেএসপি
অন্ধকূপে হান্টার

আমি এই লাইনের শেষে {{}}} at শেষ করেছি, কারণ আমাকে <%%> র‍্যাপারটি পরিবর্তন করতে হয়েছিল এবং এটি এখনও কাজ করে।
0v3rth3d4wn

78

যদি আপনি অন্য বিবৃতিটি সংক্ষিপ্ত পছন্দ করেন তবে আপনি এই শর্টহ্যান্ড ব্যবহার করতে পারেন:

<%= typeof(id)!== 'undefined' ?  id : '' %>

এর অর্থ বৈধ হলে আইডি প্রদর্শন করুন এবং এটি না থাকলে ফাঁকা।


6
টার্নারি অপারেটর
ব্যবহারকারী 457015

4
শর্তসাপেক্ষ অপারেটর , এটি একমাত্র সাধারণ টের্নারি অপারেটর (থ্রি-অপারেন্ডস) হওয়ায় ডাক নামটি "টের্নারি" পায়।
আগ্রহী

1
নোট করুন যে এই উত্তরে প্রস্তাবিত কৌশলটির মাঝে মাঝে ঘাটতি হ'ল আপনি আবারও স্ট্রিং ইন্টারপোলেশনটি আটকে রেখেছেন, যা আপনার জন্য টেমপ্লেটগুলি সমাধান করার কথা। এখনই হিসাবে, প্রতিটি সংকলিত কোড ট্যাগের শুরুতে _.templateএকটি সন্নিবেশ করানো ;হয়। সুতরাং, এটি বিবৃতিগুলির মধ্যে বিচ্ছিন্ন ট্যাগগুলি পরিচালনা করতে পারে তবে ভাবের ভিতরে নয়। তুলনা ;if(a){b;}else{c;}করার জন্য ;a?b;:c;
আগ্রহী

21

পরিস্থিতি এবং বা আপনার স্টাইলের উপর নির্ভর করে আপনি নিজের ট্যাগগুলির মধ্যেও মুদ্রণ ব্যবহার করতে চান <% %>, কারণ এটি সরাসরি আউটপুট দেয়। ভালো লেগেছে:

<% if (typeof(id) != "undefined") {
     print(id);
}
else {
    print('new Model');
} %>

এবং কিছু সংক্ষেপে মূল স্নিপেটের জন্য:

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>

9

আন্ডারস্কোর.জেএস-তে যদি অন্য কোনও পরীক্ষা করা হয় তবে আপনার যদি নাল চেক অন্তর্ভুক্ত করতে হয় তবে এখানে একটি সহজ।

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>


4
এই ক্ষেত্রে এটি কোনও ব্যাপার নয়, যেহেতু তিনি == ব্যবহার করে মানটি পরীক্ষা করে যা মানটিকে রূপান্তরিত করে। ধরণের রূপান্তরটির কারণে নিম্নলিখিত বিবৃতিটি সত্য: নাল == অপরিবর্তিত - কেবল এটি বলছে না just
জোহানেস লম্পে

আমি মনে করি এটি ব্যবহার করা আরও ভাল_.isEmpty()
নিক ব্যারেট

5

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

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>

এই লুপের মধ্যে, কেবল আপনার সূচকের মানটি পরীক্ষা করুন (i, আমার ক্ষেত্রে):

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>

এটি করার ফলে আমার সূচকের বাকি অংশ দুটি দ্বারা বিভক্ত হবে (প্রতিটি সূচী সারির জন্য 1 এবং 0 এর মধ্যে টগলিং)।


3

আপনি _.is সংজ্ঞায়িত চেষ্টা করতে পারেন

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>

"তারিখ অপরিজ্ঞাপিত" এবং "তারিখ সংজ্ঞায়িত করা হয়নি" এর মধ্যে পার্থক্য সম্পর্কে সচেতন হন। তাদের সেই ত্রুটি বলা উচিত ছিল "'তারিখ' নামের সাথে কোনও পরিবর্তনশীল বা বৈশ্বিক সম্পত্তি বিদ্যমান নেই।" আপনার প্রস্তাবিত কোডটি এখনও dateউপস্থিত না থাকলে একটি ব্যতিক্রম ছুঁড়ে ফেলবে। typeofএই ক্ষেত্রে আপনার সত্যই দরকার আছে , যদিও আমরা যখন নামক ভেরিয়েবল ব্যবহার করি তখন তার থেকে আরও ভাল হবে যখন আমরা হাঁসের-টাইপ টেম্পলেট ডেটা টাইপ করব।
প্রখর

0

থেকে এখানে :

"আপনি ভেরিয়েবল হিসাবে অ্যাক্সেস না করে সেই বস্তুর মাধ্যমে ডেটা অবজেক্টের বৈশিষ্ট্যগুলিও উল্লেখ করতে পারেন।" অর্থ হ'ল ওপি'র ক্ষেত্রে এটি কাজ করবে (অন্যান্য সম্ভাব্য সমাধানের তুলনায় উল্লেখযোগ্যভাবে ছোট পরিবর্তন সহ):

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>

0

নাল মানগুলি পরীক্ষা করতে আপনি অফিসিয়াল ডকুমেন্টেশন_.isNull থেকে ব্যবহার করতে পারেন

isNull_.isNull(object)

বস্তুর মান শূন্য হলে সত্যটি ফেরত দেয়।

_.isNull(null);
=> true
_.isNull(undefined);
=> false
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.