নকআউট সহ একটি চিত্র গ্যালারী তৈরি করুন

কন্টেন্ট

• নকআউট কী?
• এটি ব্যবহার করা
• শুরু হচ্ছে
• সরানো
• এটি ফিট করা
• মোড়ক উম্মচন

এই নিবন্ধটি প্রথম। নেট ম্যাগাজিনের 228 সংখ্যায় প্রকাশিত হয়েছিল - ওয়েব ডিজাইনার এবং বিকাশকারীদের জন্য বিশ্বের সর্বাধিক বিক্রিত ম্যাগাজিন।

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

ইন্টারফেসের জন্য যেখানে ব্যবহারকারী ডেটা দিয়ে পৃষ্ঠাগুলি দিতে পারে, পৃষ্ঠায় উপাদানগুলির উপস্থিতি বা অবস্থান পরিবর্তন করতে পারে বা এমন বাছাই বা ফিল্টার তৈরি করতে পারে যা বজায় রাখার দরকার হয়, যেখানে ডিওএম পরিদর্শনের উপর নির্ভর করতে চেষ্টা করা হয় যে জিনিসগুলি হতাশার অবসান ঘটাতে পারে কিনা তা বোঝার জন্য। জিনিসগুলির কাছে যাওয়ার আরও ভাল উপায় হ'ল উপস্থাপনা এবং যুক্তিগুলির পরিষ্কার বিচ্ছিন্নতা এবং সেখানেই নকআউটের মতো ফ্রেমওয়ার্কগুলি আসে j আপনি ইতিমধ্যে jQuery বা অন্যান্য জাভাস্ক্রিপ্ট লাইব্রেরিতে ইভেন্ট হ্যান্ডলার বাইন্ডিং ব্যবহার করে কোনও পৃষ্ঠার অংশগুলির সাথে ব্যবহারকারীর ক্রিয়া সংযোগ করতে পারেন , তবে নকআউটের সাহায্যে আমরা আরও একধাপ এগিয়ে যেতে পারি এবং জাভাস্ক্রিপ্টটি স্বয়ংক্রিয়ভাবে ইন্টারফেসটি পপুলেট করতে পারি - তাই যখনই ডেটা বা রাজ্যের পরিবর্তন হয় তাই ইউআই হয়।

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

নকআউট কী?

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

• মডেলটি আপনার ডেটা: সাধারণত এটি অ্যাজাক্সের মাধ্যমে জেএসএন হবে, তবে আপনার অ্যাপে ডেটা পাওয়ার আরও অনেক উপায় আছে যেমন বিদ্যমান ডিওএমকে জিজ্ঞাসা করা।
• দৃশ্য আপনার এইচটিএমএল, আপনি যে কোনও উপাদানকে জনিত করতে চান বা হস্তান্তর করতে চান তার সাথে একটি তথ্য বাঁধাই করা গুণ এটি HTML5 কাস্টম ব্যবহার করে তথ্য - * বৈশিষ্ট্য সিনট্যাক্স, সুতরাং এটি বৈধতা পাস করে তবে এইচটিএমএল 4 এবং এক্সএইচটিএমএল নথিগুলিতেও ব্যাখ্যা করা যায়।
• দর্শন মডেল জাভাস্ক্রিপ্ট অবজেক্ট দৃষ্টান্ত যা সবকিছুকে এক সাথে সংযুক্ত করে। এগুলি পুনরায় ব্যবহারযোগ্য ফাংশন, যাতে আপনার এক পৃষ্ঠায় একটি ভিউ মডেলের একাধিক উদাহরণ থাকতে পারে বা পিতামাতায় কোনও শিশু মডেল বাসাতে পারেন।

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

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

এটি ব্যবহার করা

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

ইতিমধ্যে ইতিমধ্যে এই ধরণের উপাদানগুলির অগণিত উদাহরণ অবশ্যই রয়েছে, তবে বেশিরভাগই নিজের মার্কআপটি কীভাবে তৈরি করা উচিত সে সম্পর্কে তাদের নিজস্ব ধারণা নিয়ে আসবেন - এবং সরবরাহকৃত সিএসএসে খনন করতে এবং পরিবর্তনগুলি শুরু করা একটি নৃত্যকোষ হতে পারে। এবং এটি হ'ল প্লাগ-ইনটি আবিষ্কারের আগে 10 টি জিনিস আপনার প্রয়োজন হয় না, এর পরিমাণ এবং জটিলতা যুক্ত করে। অবশ্যই আরও একটি ভাল উপায় হ'ল এইচটিএমএল এবং লেআউটটি যে আপনি চান তা দিয়ে শুরু করা এবং সেখান থেকে পরিষ্কারভাবে কার্যকারিতা যুক্ত করুন।

একটি ভিউ মডেল তৈরি করার সময় মনে রাখার মূল নীতিটি হ'ল এটি কীভাবে ডিওএমের কাঠামোগত বা ছাঁটাইয়ের জ্ঞান নেই of ইউআই আপডেটগুলি HTML এ ডেটা বাইন্ডিংয়ের মাধ্যমে পরিচালিত হয়; যদি এগুলি উপস্থিত থাকে তবে অ্যাপটি দেখতে কেমন তা বিবেচনা না করেই কাজ করবে। আপনি ভিউ মডেলের একই অংশে যতটা উপাদান পছন্দ করতে পারেন তার সাথে আবদ্ধ করতে পারেন এবং যদি একটি বাঁধাই করা না হয় তবে কোনও অসুবিধে হয় না তাই আপনি অনেকগুলি ভিন্ন পরিস্থিতিতে একই যুক্তিকে পুনরায় ব্যবহার করতে পারেন।

ভিউ মডেলটি বিশুদ্ধরূপে ডেটা নিয়ে কাজ করছে এবং এই আলগা সংযুক্তির অর্থ আপনার পছন্দমতো হলেও আপনি একসাথে মাপসই করতে পারেন এমন যৌক্তিক, পরীক্ষামূলক উপাদানগুলি তৈরি করা সত্যিই সহজ। নকআউট আইআই 6 এর সাথে সামঞ্জস্যপূর্ণ এবং এটি অন্য কোনও জাভাস্ক্রিপ্ট লাইব্রেরির উপর নির্ভর করে না, তাই আমি যেখানে সম্ভব সেখানে ডেমো ফ্রেমওয়ার্ক-অজ্ঞেয়াদি রেখেছি। আমি পৃষ্ঠাটি শুরু করতে এবং মডেলটি দেখতে jQuery ব্যবহার করছি, তবে কেন আপনি নিজের পছন্দমতো কাঠামো - বা খাঁটি জাভাস্ক্রিপ্ট দিয়ে এটি প্রতিস্থাপন করতে পারবেন না তার কোনও কারণ নেই।

শুরু হচ্ছে

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

এখান থেকে আমরা প্রতিটি চিত্রের URL এবং এর সাথে সম্পর্কিত ক্যাপশনটি বের করতে একটি ডোম ক্যোয়ারী ব্যবহার করতে পারি এবং এটি ব্যবহার করে ভিউ মডেলটিতে সরবরাহ করতে পারি সূচনা ফাংশন আমরা এই ডেটাটিকে একটি নতুন এইচটিএমএল কাঠামোর প্রতিলিপি করব, যাতে প্রগতিশীল বর্ধনের চেতনায় আমরা পৃষ্ঠা লোড চলাকালীন জাভাস্ক্রিপ্ট ব্যবহার করে মূল মার্কআপটি আড়াল করতে পারি। এই পদ্ধতিতে এখনও মূল চিত্রের তালিকা ব্রাউজারগুলিতে উপলব্ধ থাকবে যা আরও ধনী UI প্রয়োগ করতে পারে না।

<< li> a href = "img / 1.webp"> চিত্র 1 ক্যাপশন </ a> </li> a href = "img / 2.webp"> চিত্র 2 ক্যাপশন </ a> </ li> li> a href = "img / 3.webp"> চিত্র 3 ক্যাপশন </ a> / li> ... li> a href = "img / 8.webp"> চিত্র 8 ক্যাপশন / a> / li> </ul>

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

var সাইট = সাইট || {মডেল: {}}; সাইট.models.Gallery = ফাংশন () {var স্ব = এটি; this.itemsObservables = ko.observableArray (); this.init = ফাংশন (ডেটা) {ko.utils.arrayForEach (তথ্য, ফাংশন (আইটেম) {self.itemsObservables.push (নতুন সাইট.মোডেলস.গ্যালারিআইটেম (আইটেম));}); ।। সাইট.models.GalleryItem = ফাংশন (এল)। this.isSelected = ko.observable (মিথ্যা); this.src = el.href; this.caption = el.innerHTML;

অভ্যাসগতভাবে আমি আমার কোডের জন্য একটি নেমস্পেস তৈরি করি; এটি আপনার সাইটে অন্য যে কোনও জাভাস্ক্রিপ্টের সাথে বিরোধের সম্ভাবনা ব্যাপকভাবে হ্রাস করে এবং তাই আমাদের গ্যালারী ভিউ মডেলটিকে কল করার স্বাধীনতা দেয় গ্যালারী উদ্বিগ্ন না হয়ে যে অন্য কোথাও অন্য কোনও ‘গ্যালারী’ সংজ্ঞায়িত হতে পারে। নকআউট তার নিজস্ব নাম স্থান তৈরি করে, কো, যা তার সমস্ত নিজস্ব পদ্ধতির জন্য ধারক হিসাবে ব্যবহৃত হয় - jQuery এর similar এর অনুরূপ $

এর পরে দুটি ফাংশন হ'ল আমাদের দেখার মডেলগুলি, সামগ্রিক গ্যালারীটির জন্য একটি এবং এর অভ্যন্তরের আইটেমগুলির জন্য একটি। পূর্বে উল্লিখিত হিসাবে, আপনার বাসা বাচ্চাদের মডেলগুলির নমনীয়তা রয়েছে তাই যখন আপনি কার্যকারিতাটি পুনরাবৃত্তি করতে চান তখন জিনিসগুলিকে পৃথক ব্লকের মধ্যে ভেঙে ফেলা উচিত।

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

ঘোষণা দিয়ে ko.observableArray একটি খালি ফাংশন কল দিয়ে আমরা এটিকে ‘অপরিজ্ঞাত’ সামগ্রী দিয়ে তৈরি করছি, সুতরাং এতে ডেটা যুক্ত করতে সক্ষম হওয়ার জন্য আমাদের একটি সূচনা পদ্ধতি তৈরি করা উচিত। ফাংশনের ভিতরে পরবর্তী পদ্ধতি, this.initএটা যত্ন নেয়।

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

ফাংশনটির বডি একটি নকআউট ইউটিলিটি পদ্ধতি ব্যবহার করে, ko.arrayforEach, ডেটা অ্যারের মাধ্যমে লুপ করতে এবং প্রতিটি আইটেমটি তে ঠেলাতে আইটেমসজারভেজেবল ables। আপনি ব্যবহার করতে পারে ea .চ jQuery বা _.এইচ অ্যান্ডস্কোর - বা আপনার পছন্দ মতো অন্য কোনও পদ্ধতিতে। অবশ্যই, আমরা একবার এর অভ্যন্তরে অ্যারেফোরএচ কলব্যাক এর নিজস্ব রয়েছে has এই সুযোগ, সুতরাং ভিউ মডেল নিজেই আমরা মধ্যে একটি রেফারেন্স পাস করতে সক্ষম হতে একটি পরিবর্তনশীল স্ব তৈরি করেছি।

ko.utils.arrayForEach (ডেটা, ফাংশন (আইটেম) {self.itemsObservables.push (নতুন সাইট.মোডেলস.গ্যালারি আইটেম (আইটেম));});

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

সাইট.মোডেলস.গ্যালারিআইটেম = ফাংশন (এল) {this.isSelected = ko.observable (মিথ্যা); this.src = el.href; this.caption = el.innerHTML;

প্রথমে আমরা একটি একক নকআউট পর্যবেক্ষণযোগ্য তৈরি করি নির্বাচিত যা সম্ভবত স্পষ্ট হতে পারে, এই আইটেমটি নির্বাচন করা হয়েছে কি না। একটি খালি ফাংশন কল দিয়ে এটিকে ‘অপরিজ্ঞাত’ করার পরিবর্তে, আমরা যখন পর্যবেক্ষণযোগ্য তৈরি করি তখন মানটিতে পাস করে আমরা এটি মিথ্যা হিসাবে ডিফল্ট করব।

তারপরে (এবং এখানে আমরা একটি উপাদান পাস করার উপর নির্ভর করছি, তবে আপনি অন্যের জন্য পরীক্ষা করতে পারেন প্রয়োজনে) আমরা সেট করেছি this.src উপাদানটির href বৈশিষ্ট্য এবং this.caption এটিতে অভ্যন্তরীণ HTML। এগুলি পর্যবেক্ষণযোগ্যদের চেয়ে সহজ পরিবর্তনশীল, কারণ আমরা সেগুলি পরিবর্তনের প্রত্যাশা করি না এবং তাই এগুলি নকআউটের পর্যবেক্ষণযোগ্য শৃঙ্খলে রাখার ওভারহেডের দরকার নেই। এবং আমরা একেবারেই এটি করার কারণটি হ'ল আমরা উপাদানটি থেকে ডেটা আহরণ এবং এটি একটি বিমূর্ত বস্তুর মধ্যে সঞ্চয় করছি যাতে আমরা এটি আমাদের পছন্দ মতো পুনরায় প্রয়োগ করতে পারি।

একটি বেসিক স্তরে, আমাদের সাধারণ ভিউ মডেলগুলিতে একটি সাধারণ গ্যালারী তৈরি করতে এগুলি কেবল আমাদের প্রয়োজন। এখন আসুন আমরা ইউআই এর জন্য এইচটিএমএল টেমপ্লেটটি দেখুন বা দেখুন, যেখানে আমরা এর পর্যবেক্ষণযোগ্যদের ডেটা-বাঁধাই করব:

div ডেটা-বাইন্ড = "ফোরচ: আইটেমস অবজার্ভেবলস"> ডিভ> ইমগ প্রস্থ = "800" উচ্চতা = "533" ডেটা-বাইন্ড = "অ্যাট্রি: s 'এসসিআর': এসআরসি, 'ওয়েল': ক্যাপশন}" /> / ডিভ> / div>

আপনি দেখতে পারেন যে আমরা একটি ধারক উপাদান সেট করেছি, শ্রেণীর সাথে একটি ডিভ গ্যালারী, এবং এর মধ্যে একটি টেম্পলেট রয়েছে, div.item। নকআউটের পূর্ববর্তী সংস্করণগুলির জন্য আপনাকে এই টেমপ্লেটগুলি স্ক্রিপ্ট উপাদানগুলির মধ্যে এম্বেড করার দরকার ছিল, যা পরিষ্কার HTML এর দৃষ্টিকোণ থেকে খুব সন্তোষজনক ছিল না, তবে বর্তমানের 2.0 সংস্করণে এটি আর প্রয়োজন নেই necessary আপনি যদি চান তবে আপনি বিশেষভাবে ফর্ম্যাট করা এইচটিএমএল মন্তব্যে নিয়ন্ত্রণ প্রবাহের বাইন্ডিং ব্যবহার করে ধারক উপাদানগুলিও সরিয়ে ফেলতে পারেন, তবে আমরা এখানে এটি আবরণ করব না।

পাত্রে একটি হয় তথ্য বাঁধাই করা এর মান সহ বৈশিষ্ট্য ভবিষ্যদ্বাণী: আইটেমস অবজারভেবলযা নকবআউটকে সেই পর্যবেক্ষণযোগ্য অ্যারের মধ্য দিয়ে লুপ করতে এবং তার ভিতরে থাকা আইটেমগুলিতে টেম্পলেটটি প্রয়োগ করতে বলে। আইটেমগুলি এর দৃষ্টান্ত গ্যালারী আইটেম মডেলটি আমরা init ফাংশনে তৈরি করেছি, সুতরাং টেমপ্লেটের মধ্যে থাকা ইমেজ উপাদানটিতে থাকা ডেটা বাঁধাই অ্যাক্সেস করতে পারে src এবং ক্যাপশন প্রতিটি একের মধ্যে মান এবং সেই অনুযায়ী উপাদান বৈশিষ্ট্য সেট করে।

পর্যবেক্ষণযোগ্য অ্যারে যেমন খালি হয় আমরা কল করার আগেই এটা পদ্ধতি, যে বিন্দুতে কোন হবে div.item ডোমের উপাদানসমূহ - খালি টেম্পলেটটি সহজেই সঞ্চিত থাকে। যদি আমরা অ্যারেতে আইটেমগুলি যুক্ত করতে বা সরাতে শুরু করি, ডেটা বাইন্ডিংয়ের ফলে এই টেম্পলেট উপাদানগুলির অনুলিপিগুলি স্বয়ংক্রিয়ভাবে তৈরি বা ধ্বংস হয়ে যায়।

এই সমস্ত কাজ করার শেষ পদক্ষেপটি একটি উদাহরণ তৈরি করা create গ্যালারী পৃষ্ঠা লোডে মডেল দেখুন এবং এটি আমাদের ডোম উপাদান অ্যারে দিয়ে পপুলেট করুন। আমি এর জন্য প্রস্তুত ফাংশনে jQuery ব্যবহার করছি, তবে আপনার গ্রন্থাগার এবং পছন্দের কৌশলটি নির্বিঘ্নে বোধ করতে পারেন:

function (ফাংশন () {var ভিউমোডেল = নতুন সাইট.মোডেলস.গ্যালারি (); ভিউমোডেল.ইনিট ($ (’ul.origin a’)); ko.applyBindings (ভিউমোডেল);});

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

সরানো

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

এর প্রথম অংশটি অর্জন করার জন্য, আমরা সেই নীতিটি ব্যবহার করব যা একই তথ্য কয়েকবার DOM এ আবদ্ধ হতে পারে এবং একটি থাম্বনেইল স্ট্রিপের জন্য একটি নতুন টেমপ্লেট সেট আপ করব:

div> উল ডেটা-বাইন্ড = "ফোরচ: আইটেমস অফার্বেবলস"> লি ডাটা-বাইন্ড = "সিএসএস: selected 'নির্বাচিত': আইসলেক্টেড}, ক্লিক করুন: $ প্যারেন্ট.সलेक्ट"> আইএমজি ডেটা-বাইন্ড = "অ্যাটার: s 'এসসিআর': src} "প্রস্থ =" 140 "/> স্প্যান ডেটা-বাইন্ড =" পাঠ্য: ক্যাপশন "> </ span> / li> / ul> / div>

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

থাম্বনেইল তালিকার আইটেমের প্রথম বাঁধাই হ'ল CSS: Selected ’নির্বাচিত’: নির্বাচিত}, যা শর্তসাপেক্ষে সিএসএস ক্লাস প্রয়োগ করতে ব্যবহৃত হয় - এটি কেবলমাত্র উপাদানটিতে প্রদর্শিত হবে যদি নির্বাচিত সত্য এবং তাই বর্তমানে নির্বাচিত আইটেমটি নির্দেশ করুন। আমরা তৈরি যখন গ্যালারী আইটেম মডেল দেখুন দেখুন আমরা এই পর্যবেক্ষণযোগ্যটি ডিফল্টরূপে মিথ্যা করেছি, সুতরাং আপাতত ক্লাস প্রয়োগ করা হবে না। দ্য সিএসএস বাইন্ডিংটির সামান্য পাল্টা স্বজ্ঞাত নাম রয়েছে - এটি শ্রেণীর সাথে কাজ করে - তবে আপনি যদি পৃথক CSS বৈশিষ্ট্যগুলি আবদ্ধ করতে চান তবে আপনি এটি ব্যবহার করতে পারেন স্টাইল বাঁধাই

এটি কার্যকর করতে তালিকার আইটেমটিতে একটি নতুন ধারণাও রয়েছে; একটি বাধ্যতামূলক $ প্যারেন্ট.সलेक्ट ক্লিক ইভেন্টে। আপনি যদি ইভেন্ট হ্যান্ডলিংয়ের জন্য নকআউট ব্যবহার করেন তবে এটি ডিফল্ট ডিওএম ইভেন্ট এবং এই উপাদানটিতে থাকা অন্য কোনও ইভেন্ট শ্রোতার চেয়ে বেশি প্রাধান্য পাবে, তবে আপনি যদি ফাংশন থেকে সত্য ফিরে এসে আপনার প্রয়োজন হয় তবে আপনি পরে তাদের কাছে নিয়ন্ত্রণ ফিরিয়ে দিতে পারেন we তৈরি করতে চলেছি।

দ্য $ পিতা বা মাতা আইটেম টেমপ্লেটে, ফাংশন অ্যাসাইনমেন্টের উপসর্গটি এখানে রয়েছে কারণ আমরা of গ্যালারী আইটেম মডেল দেখুন এবং এটি ব্যবহার করে আমরা এর অ্যাক্সেস করতে পারি পিতামাতা মডেল দেখুন, উদাহরণ গ্যালারী, এবং একটি ফাংশন কল নির্বাচন করুন - যা আমরা সেখানে সংজ্ঞায়িত করব। এটা যেতে পারে গ্যালারী আইটেম মডেল দেখুন এবং সরাসরি বলা হবে (ডেটা-বাইন্ড ব্যবহার করে "ক্লিক করুন: নির্বাচন করুন"), তবে এটির অর্থ প্রতিটি আইটেমের সাথে এটির একটি অনুলিপি তৈরি করা এবং এটিও একটি স্তর বাড়িয়ে তোলার আরও একটি সুবিধা রয়েছে।

this.select = ফাংশন (ডেটা, ই) {self.setSelected (নতুন নির্বাচন); ।

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

নকআউটের ইভেন্ট বাইন্ডিংগুলি দুটি ডিফল্ট আর্গুমেন্ট সরবরাহ করে। প্রথম, তথ্য, এটি কি একটি স্ন্যাপশট লক্ষ্য উপাদান আবদ্ধ; এই ক্ষেত্রে প্রাসঙ্গিক উদাহরণ গ্যালারী আইটেম মডেল দেখুন। দ্বিতীয়, e, আসল DOM ইভেন্ট। আমাদের ফাংশন কল সেট নির্বাচন করা এটি দিয়ে এবং ডিফল্ট ক্রিয়া প্রতিরোধ করে। আমরা যেমন উদাহরণের তালিকার আইটেমটিতে ক্লিক করেছি সেখানে কোনও ডিফল্ট ক্রিয়া নেই, সুতরাং এটি সত্যই প্রয়োজনীয় নয়, তবে আমরা যদি কোনও লিঙ্ক ব্যবহারের জন্য টেমপ্লেটটি পরিবর্তন করি তবে তা আমাদের ধরা পড়বে না।

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

এটি প্রতিরোধ করতে, আমরা সমস্ত দৃষ্টান্তের মধ্য দিয়ে লুপ করি গ্যালারী আইটেম মধ্যে আইটেমসজার্ভেবল এবং তাদের নতুন নির্বাচনের সাথে তুলনা করুন। এই তুলনার ফলাফলটি একটি বুলিয়ান - মিথ্যা বা সত্য - তাই আমরা এটিকে সরাসরি অর্পণ করতে পারি নির্বাচিত যুক্তি হিসাবে তুলনা সঙ্গে পর্যবেক্ষণযোগ্য কল করে। এইভাবে একবারে কেবলমাত্র একটি নির্বাচন করা যেতে পারে এবং যে আইটেমটি রয়েছে নির্বাচিত সেট সত্য এখন সিএসএস ক্লাস পাবেন নির্বাচিত প্রয়োগ এটিই যেখানে বাছাইয়ের যুক্তিকে মূলত রাখার সুবিধা গ্যালারী ভিউ মডেলটি স্পষ্ট হয়ে ওঠে, কারণ এই স্তরটি থেকে আমরা সহজেই এর নিজস্ব বৈশিষ্ট্যগুলির মধ্যে - এর মধ্যে সমস্ত আইটেম সহ পদক্ষেপ করতে পারি আইটেমসজারভেজেবল ables.

জন্য চূড়ান্ত ব্যবহার নির্বাচিত শর্তসাপেক্ষে মূল চিত্রগুলির দৃশ্যমানতা সেট করতে হয়।

div ডেটা-বাইন্ড = "ফোরচ: আইটেমস অবসরগুলি"> ডিভি ডেটা-বাইন্ড = "দৃশ্যমান: আইসলেক্টেড"> ... / ডিভিও </ div>

আমরা এটি যুক্ত করে এটি করতে পারি দৃশ্যমান বাধ্যতামূলক নির্বাচিত চালু div.item। এটি উপাদানটির স্টাইলটি সরাসরি হেরফের করে কাজ করে, তাই যেখানে কোনও আইটেম নির্বাচিত মিথ্যাতে এর CSS ডিসপ্লে নিয়ম সেট করা থাকবে কিছুই না, এবং যেমন ভিউ মডেল পরিবর্তিত হয় আইটেমের দৃশ্যমানতা।

আবার, আমরা যদি ব্রাউজারে দেখি তবে জিনিসগুলি গ্যালারী থেকে আমরা যা প্রত্যাশা করি তা ঠিক না হয়। সাধারণত সেটটিতে প্রথম চিত্রটি ডিফল্টরূপে বাছাই করা হত, তবে এটি যেমন দাঁড়িয়েছে আমরা সমস্ত আইটেমের জন্য আরম্ভ করছি নির্বাচিত সেট মিথ্যাসুতরাং ব্যবহারকারী কোনও একটি না নির্বাচন করা পর্যন্ত কোনও বড় চিত্র দৃশ্যমান হয় না। এটির জন্য, প্রধান দর্শন মডেল init পদ্ধতিতে আসুন সেট করা যাক নির্বাচিত প্রথম আইটেম সত্য সুতরাং এটি প্রদর্শিত হবে।

this.init = ফাংশন (ডেটা) self var স্ব = এটি; ... this.itemsObservables () [0] .এই নির্বাচিত (সত্য);

পাশাপাশি নকআউটের অভ্যন্তরীণ পদ্ধতিগুলি ব্যবহার করা (যেমন ঠেলা, যা খাঁটি জাভাস্ক্রিপ্টের চেয়ে তার নিজস্ব ঠেলা) উপরে আইটেমসজারভেজেবল ables অ্যারে, আমরা এটি দিয়ে কল করতে পারি () এবং তারপরে যে কোনও আইটেম অ্যাক্সেস করুন ঠিক যেমন আমরা নিয়মিত অ্যারে করি। আমরা নিয়মিত পর্যবেক্ষণে তাদেরকে আর্গুমেন্ট হিসাবে মান সহ কল ​​করে নির্ধারণ করি, সুতরাং নতুন লাইনে এটা ফাংশন এখন সেট করে নির্বাচিত পর্যবেক্ষণযোগ্য অ্যারেতে প্রথম আইটেমটিতে সত্য.

এটি ফিট করা

এতক্ষণে আমাদের কাছে একটি ন্যূনতম তবে কার্যকরী চিত্র গ্যালারী রয়েছে। সেট থেকে কেবল একটি চিত্র একবারে প্রদর্শিত হয় এবং সেখানে থাম্বনেইলের একটি প্রদর্শন রয়েছে যা ব্যবহারকারী প্রদর্শিত হবে তা নির্বাচন করতে ক্লিক করতে পারেন।

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

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

সাইট.মোডেলস.গ্যালারি = ফাংশন () self স্ব স্ব = এটি; this.itemsObservables = ko.observableArray (); this.measureContent = নাল; this.scrollable = new site.models.ScrollableArea (); ...

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

সাইট.models.ScrollableArea = ফাংশন () {var স্ব = এটি; this.scrolThreshold = ko.observable (0); this.contentSize = ko.observable (0); this.scrolValue = ko.observable (0); this.scrolClickStep = ko.observable (400); this.isScrollable = ko.computes (ফাংশন () self self.contentSize ()> self.scrolThreshold ();}); {

এখানে পর্যবেক্ষণযোগ্যদের প্রথম অংশটি ইউআই-এর অবস্থার উপর নজর রাখে। স্ক্রোলথ্র্যাসোল্ড চিত্র গ্যালারী সামগ্রিক প্রস্থ হয়। অনুশীলনে এটি হবে 800 তবে এটি একটি জেনেরিক ভিউ মডেল তাই আমরা এটির সূচনা করব 0; আসল আকারটি এর মধ্যে পাস হতে পারে দলিল প্রস্তুত ফাংশন। কন্টেন্টসাইজ আবার শুরু করা হয় 0, এবং এটি সমস্ত থাম্বনেইল আইটেমের মোট প্রস্থের পরিমাপ হবে। থাম্বনেইল অঞ্চলটি স্ক্রোল করা উচিত কিনা তা পরবর্তী সময়ে আমরা এই মানগুলি তুলনা করব।

পরেরটি স্ক্রোলভ্যালু, এটি থাম্বনেল স্ট্রিপের "বামে" অবস্থান কোথায় হওয়া উচিত এবং এটি আবার 0 এ ডিফল্ট হওয়া উচিত তার রেকর্ড Finally স্ক্রোলক্লিকস্টেপ বাম বা ডান দিকে গেলে থাম্বনেল স্ট্রিপটি কতটা সরানো উচিত তার একটি সেটিংস এবং আমাদের ডেমোটির জন্য এটি ডিফল্ট হয়েছে 400 (পিক্সেল)

এর পরে আমরা চালাক স্টাফগুলিতে চলে যাই, যেখানে নকআউটের শক্তি সত্যই প্রকট হয়ে যায়। এতক্ষণ আমরা মোকাবিলা করেছি ko.observable এবং ko.observableArrayতবে তৃতীয় প্রকারের পর্যবেক্ষণযোগ্য, ko.computes, যা অন্যান্য যে কোনও পর্যবেক্ষণযোগ্য সংখ্যক দেখতে পাবে এবং যখনই তাদের কোনও পরিবর্তন হবে তাদের ভিত্তিতে একটি গণিত মান প্রদান করবে। এগুলি হয় কেবলমাত্র পঠনযোগ্য গণনা, বা দ্বি-মুখী পঠন / লেখার ফাংশন।

বরং তৈরি করা isScrollable একটি সাধারণ মান সহ, আমরা পরিবর্তে এটি একটি ফাংশন দিয়ে কল করি যা এই ক্ষেত্রে আমাদের আগের দুটি পর্যবেক্ষণযোগ্যের তুলনা ফিরিয়ে দেয়, কন্টেন্টসাইজ এবং স্ক্রোলথ্র্যাসোল্ড, থাম্বনেল স্ট্রিপের সামগ্রিক প্রস্থ এটি প্রদর্শিত করার জন্য আমাদের উপলব্ধ স্থানের চেয়ে বড় হলে কাজ শুরু করতে হবে work 0, সুতরাং এটি মিথ্যা হবে - স্ক্রোলযোগ্য নয় - তবে আমরা DOM পরিমাপ করার সাথে সাথে সেখানে কিছু বাস্তব মান রেখে দিলে এটি স্বয়ংক্রিয়ভাবে পুনরায় গণনা করবে এবং এই গণিত পর্যবেক্ষণে আবদ্ধ টেমপ্লেটের যে কোনও কিছুই প্রতিক্রিয়া জানাবে। এর ব্যবহারিক উপায় হ'ল দস্তাবেজ প্রস্তুত ফাংশনটি প্রসারিত করা যা আমরা ইতিমধ্যে মূল ভিউ মডেল উদাহরণটি সেট আপ করতে ব্যবহার করি:

function (ফাংশন () {var ভিউমোডেল = নতুন সাইট.মোডেলস.গ্যালারি (); ভিউমোডেল.ইনিট ($ ('ul.origin a')); কো.এপপ্লাইবাইন্ডিংস (ভিউমোডেল, $ ('বডি')। পান (0) ); var c = $ ('div.controller'); ভিউমোডেল.মিজার কনসেন্ট = ফাংশন () {রিটার্ন সি.ফাইন্ড ('লি') width প্রস্থ () * সি.ফাইন্ড ('লি') length দৈর্ঘ্য;} ভিউমোডেল .scrollable.contentSize (viewModel.measureContent ()); viewModel.scrollable.scrolThreshold (c.width ());});

এখন আমরা একটি পরিবর্তনশীল যুক্ত করেছি ’ গ, যা আমাদের থাম্বনেইল স্ট্রিপ তালিকাযুক্ত উপাদানটির জন্য একটি ডোম ক্যোয়ারিকে ক্যাশে করে। কাজ ভিউমোডেল.মিজার কনটেন্ট (মনে রাখবেন আমরা এটিকে একটি নাল ফাংশন হিসাবে তৈরি করেছি গ্যালারী মডেল পূর্বে দেখুন) এখন স্ট্রিপের মোট আকার দিতে কন্ট্রোলারে আইটেমের সংখ্যা দ্বারা গুণিত প্রথম তালিকার আইটেমের পিক্সেল প্রস্থকে কেবল ফিরে আসা হিসাবে সংজ্ঞায়িত করা হয়। সমস্ত আইটেম একই প্রস্থের উপর নির্ভর করা ঝুঁকিপূর্ণ তবে এই ডেমোটির জন্য এটি করবে।

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

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

div> উল ডেটা-বাইন্ড = "ফোরচ: আইটেমস অফারজেবলস, স্টাইল: {'প্রস্থ': স্ক্রোলএবল.কন্টেন্টসাইজ () + 'পিক্স'}"> ... / উল> বোতামের ডেটা-বাইন্ড = "দৃশ্যমান: স্ক্রোলএবল.আইস স্ক্রোলযোগ্য, সক্ষম : scrollable.canScrolLeft, ক্লিক করুন: scrollable.scrolContent "তথ্য-দিকনির্দেশ =" বাম "> button / বোতাম> বোতাম ডেটা-বাইন্ড =" দৃশ্যমান: scrollable.isScrollable, সক্ষম: scrollable.canScrolRight, ক্লিক করুন: scrollable.scrolContent "ডেটা-দিকনির্দেশ = "ডান"> button / বোতাম </ div>

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

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

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

this.calculatedScrolValue = ko.computes ({পড়ুন: ফাংশন () {রিটার্ন (self.isScrollable ())? self.scrolValue (): 0; write, লিখুন: ফাংশন (মান) {self.scrolValue (মান);}} );

এখানে দ্বি-মুখী গণনা করা পর্যবেক্ষণের একটি উদাহরণ রয়েছে, এতে পাঠ্য এবং লেখার মান উভয়কেই কলব্যাক ফাংশন রয়েছে। মধ্যে পড়া ফাংশন এটি পরিবর্তন করতে প্রতিক্রিয়া জানাতে হবে isScrollable, তবে আমরা যদি এটিকে আর্গুমেন্টের মান দিয়ে বলি the লিখুন ফাংশন সেট করতে ট্রিগার করা হয় স্ক্রোলভ্যালু, যা আমরা একটি এ ব্যবহার করতে পারি স্টাইল থাম্বনেইল স্ট্রিপটি অবস্থান করতে টেমপ্লেটে বাঁধাই।

মোড়ক উম্মচন

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

এতে কাস্টমাইজড বাইন্ডিংগুলি রয়েছে যা সরাসরি jQuery বা অন্যান্য লাইব্রেরির প্রভাব পদ্ধতিগুলিতে ঝুঁকতে পারে এর সাথে এর আরও পুরো গভীরতা রয়েছে। একটি সরল চেয়ে বরং দৃশ্যমান বাঁধাই আপনি নিজের সংজ্ঞা দিতে পারেন বিবর্ণ উপাদানগুলি উপস্থিত হওয়া এবং কেবল পপিং বা আউট করা বা দেখার চেয়ে কিছুটা আরও শৈলীতে অদৃশ্য হওয়া।

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

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

এটি প্রথম 12dvsofxmas.co.uk এ প্রকাশিত একটি নিবন্ধের একটি সংশোধিত, প্রসারিত সংস্করণ

ক্রিয়েটিভ ব্লকের সাথে আপনার দক্ষতা বাড়ানোর জন্য 101 সিএসএস এবং জাভাস্ক্রিপ্ট টিউটোরিয়াল আবিষ্কার করুন।