2010 წლის 4 ოქტომბერს გამოქვეყნდა Microsoft-ის გუნდის მხარდაჭერით შექმნილი სამი jQuery მოდულის გამოცხადების შესახებ. ეს დანამატები არის jQuery Templates მოდული, jQuery Data Link მოდულიდა გლობალიზაციის მოდული (jQuery გლობალიზაციის მოდული)- მიიღო სტატუსი "JQuery პროექტის ოფიციალური დანამატები" (ოფიციალურად მხარდაჭერილი jQuery პროექტის დანამატები).

შაბლონის დანამატი გამოიყენება, როდესაც საჭიროა მონაცემთა ობიექტის ან ობიექტების მასივის ჩვენება გვერდის მარკირებაში. მონაცემთა დამაკავშირებელი დანამატი საჭიროა ობიექტების გვერდის ელემენტებთან დასაკავშირებლად და მნიშვნელობების სინქრონულად შესაცვლელად. გლობალიზაციის დანამატი საშუალებას გაძლევთ აჩვენოთ მონაცემები, როგორიცაა რიცხვები, თარიღი და დრო, თანხის ოდენობა და ა.შ. მიმდინარე ენის ფორმატის შესაბამისად.

უნდა აღინიშნოს, რომ Microsoft-ის გუნდმა გამოიყენა თავისი მნიშვნელოვანი გამოცდილება ამ სფეროებში, ისევე როგორც jQuery პროექტის გუნდმა და კარგად ჩამოყალიბებული ურთიერთქმედებით, ისინი აღმოჩნდა, ჩემი აზრით, შესანიშნავი ინსტრუმენტები დეველოპერებისთვის. ჩემი მოსაზრების დასადასტურებლად შემიძლია დავამატო, რომ jQuery-ის დეველოპერებმა გამოაცხადეს შაბლონის დანამატების და მონაცემთა სავალდებულო ჩართვა jQuery-ის ძირითად ბიბლიოთეკაში უკვე 1.5 ვერსიაში, ხოლო გლობალიზაციის მოდული jQuery UI-ის შესაბამის ვერსიაში. დანამატებს ჯერ არ მიუღიათ გამოშვების სტატუსი, მაგრამ საიტზე უკვე აქტიურად იწერება დოკუმენტაცია. სხვათა შორის, Microsoft-ის გუნდი მიჰყვებოდა jQuery-ის განვითარების ტრადიციებს და აქვეყნებდა დანამატების განვითარების მასალებს github.com-ზე, სადაც ხელმისაწვდომია დანამატების აღწერა და წყაროები.

ამ სტატიაში ცოტას ვისაუბრებ შაბლონის მოდულის შესახებ.

jQuery Templates მოდული

დავიწყოთ მარტივი მაგალითით:

ასე რომ, მაგალითში, გვერდის შემქმნელმა აღწერა ობიექტების ჩვენების შაბლონი მარკირების სახით (პირველი ელემენტი სკრიპტი ), შემდეგ სადღაც მივიღე ობიექტების მასივი ფილმები და გამოიძახა ინსტრუქცია შაბლონის მიხედვით საჭირო მარკირების გენერირებისთვის, მონაცემების აღება ობიექტების მოწოდებული მასივიდან და შედეგის სიის ბოლოს დამატება #კინოლისტი .
მოდულის შედეგად ჩვენ მივიღებთ შემდეგ მარკირებას:

• წითელი ვიოლინო (1998)
• Ფართოდ დახუჭული თვალები (1999)
• მემკვიდრეობა (1976)

და ახლა საქმეზე.
რას აკეთებს დანამატი?
დანამატი შეყვანის სახით იღებს შაბლონის სტრიქონს და ობიექტების ერთობლიობას (ან ერთ ობიექტს), რომელიც უნდა გამოვიდეს სტრიქონში (ან მარკირებაში) ფორმატირებით.
სად ვრცელდება?
ძირითადად, ეს მოდული სასარგებლოა JS ობიექტების გვერდზე დინამიურად ჩვენებისთვის, ობიექტების მიღება შესაძლებელია სხვადასხვა გზით, მაგალითად, გამოთვლების დროს ან მომხმარებლის ზოგიერთი მოქმედების შედეგად და, რა თქმა უნდა, ყველაზე ხშირად მოყვანილი მაგალითი, JSON ფორმა სერვერის პასუხში AJAX მოთხოვნაზე.

დანამატის მეთოდები

.tmpl ([ მონაცემები ], [ ვარიანტები ])
იღებს პირველი შერჩეული ელემენტის შინაარსს და იყენებს მას, როგორც თარგი მითითებული მონაცემების ფორმატირებული გამოსავლისთვის.
მონაცემები – შაბლონში გასატანი მონაცემები (ობიექტი ან ობიექტების მასივი).
პარამეტრები – სურვილისამებრ, მომხმარებლის მიერ განსაზღვრული გაფართოება საკვანძო-მნიშვნელობის წყვილების სახით შაბლონში გამომავალი ობიექტისთვის.
jQuery.tmpl(თარგი, [მონაცემები], [ოფციები])
იყენებს მითითებულ შაბლონს მითითებული მონაცემების გამოსავლის ფორმატირებისთვის.
შაბლონი – მონაცემთა ფორმატირების შაბლონი, შეიძლება იყოს ერთ-ერთი შემდეგი ტიპი: სტრიქონი მარკირებით, HTML ელემენტი (მათ შორის jQuery შეფუთვაში), სტრიქონი, რომელიც შეესაბამება ადრე შედგენილი შაბლონის სახელს.
მონაცემები, პარამეტრები - აქვს იგივე მნიშვნელობა, რაც ზემოთ
.tmplItem()
აბრუნებს პირველი შერჩეული ელემენტისთვის სტრუქტურას (ობიექტს) შაბლონური ძრავის შედეგებით. მეთოდით დაბრუნებული ობიექტი უზრუნველყოფს წვდომას:

• HTML ნაწილები, რომლებიც ქმნიან შაბლონს
• გადაცემული მონაცემების ასოცირებული ერთეული
• მშობელი შაბლონი, თუ მიმდინარე შაბლონი ჩასმულია
• მიმდინარე შაბლონი, რომელიც გამოიყენება გამოსასვლელად
• მომხმარებლის მიერ განსაზღვრული გაფართოება (ველები და მეთოდები) გადაცემულია tmpl() მეთოდის პარამეტრების პარამეტრში

ეს მეთოდი გამოიყენება, მაგალითად, როდესაც მონაცემების ფორმატირების შემდეგ საჭიროა იმის გარკვევა, თუ რა მონაცემები იქნა გამოყენებული მარკირების გარკვეული ნაწილის შესაქმნელად, ან მარკირების ნაწილის განახლება ახალი მონაცემების გამოყენებით.
jQuery.tmplItem(ელემენტი)
.tmplItem მეთოდის მსგავსად, ელემენტს ეძებენ მხოლოდ შაბლონის ძრავის შედეგების მქონე სტრუქტურას. ელემენტი (HTML ელემენტი, მათ შორის jQuery wrapper).
.template ([ სახელი ])
მეთოდი ქმნის ფორმატის შაბლონის შედგენილ ვერსიას პირველი შერჩეული ელემენტის შიგთავსიდან.
სახელი - სურვილისამებრ შაბლონის სახელი, თუ სახელი მითითებულია, შეგიძლიათ გამოიყენოთ იგი ამ შაბლონის მითითებისთვის მეთოდში jQuery.tmpl (სახელი, მონაცემები, პარამეტრები)
jQuery.template ([სახელი, ]თარგი)
მეთოდი მსგავსია ზემოთ აღწერილის, მხოლოდ აქ შაბლონი გადადის პარამეტრად შაბლონი - ეს შეიძლება იყოს სტრიქონი, სტრიქონი მარკირებით, HTML ელემენტი (მათ შორის jQuery wrapper-ში).

შაბლონის სინტაქსი

მოკლედ აღვწერ შაბლონის რამდენიმე ძირითად ელემენტს, იმედი მაქვს დანარჩენს უფრო დეტალურად აღვწერ შემდეგ სტატიაში (თუ ამ სტატიას დადებითი გამოხმაურება ექნება)
$(fieldNameOrExpression) და ((= fieldNameOrExpression))
საშუალებას გაძლევთ ჩასვათ მონაცემთა ობიექტის ველის (თვისების) მნიშვნელობა შაბლონში; ის ასევე შეიძლება გამოყენებულ იქნას მეთოდის ან js გამოხატვის შედეგის ჩასართავად. Მაგალითად, "$(სახელი)" - შაბლონში ჩასვამს obj.Name ველის მნიშვნელობას და მიუხედავად იმისა, რომ Languages ​​არის ობიექტის ველი, რომელსაც ენიჭება მასივი, "$(Languages.length)" - ჩასვამს ამ მასივის სიგრძეს შაბლონში და ბოლოს, თუ ობიექტს აქვს getLanguages-ის მეთოდი ორი პარამეტრით, მაშინ "$(getLanguages(ენები, ' - '))" – ამ მეთოდის შედეგს აყენებს შაბლონში.
((html ველიNameOrExpression))
შაბლონის ელემენტი $(ველი) (ან ((= ველი))) შეაქვს მითითებული ველის მნიშვნელობას შედეგში ტექსტის სახით, ე.ი. თუ სტრიქონში არის HTML ტეგები, ისინი დაშიფრული იქნება და არ გადაიქცევა მარკირებად. თუ თქვენ გჭირდებათ მონაცემების ჩასმა შაბლონში HTML მარკირების სახით, მაშინ უნდა გამოიყენოთ სინტაქსი ((html<что нужно вставить>}} .
მოდულის დასაწყებად უკვე საკმარისად ითქვა, მხოლოდ შემიძლია დავამატო, რომ შაბლონის სინტაქსი საშუალებას გაძლევთ ჩასვათ ჩასმული შაბლონები, პირობითი განცხადებები, შეხვიდეთ ზოგიერთ JS და jQuery ობიექტზე და რაღაც სხვა... დანარჩენი არის მასალა. მომავალი სტატია.

წყაროები

სტატია ეფუძნება მსოფლიო ქსელში მოძიებულ მასალებს. ძირითადად, ეს არის ოფიციალური დოკუმენტაციის თარგმანი. ორიგინალები შეგიძლიათ იხილოთ შემდეგ ბმულებზე:

• (მაგალითები აღებულია იქიდან)

ავტორის შესახებ

მე მქვია ანდრეი ზაიცევი, პროფილი zandroid ფორუმზე

ეს არის ჩემი პირველი სტატია ამ ბლოგზე და ვიმედოვნებ, რომ არ იქნება ბოლო. დიდი მადლობა გენადი მისი გამოქვეყნების შესაძლებლობისთვის და მასალის დაწერისა და დიზაინის შესახებ სასარგებლო რჩევებისთვის.

მაგალითები

მაგალითი 1: გამოყენებული შაბლონის დინამიური გადართვა

დააწკაპუნეთ დეტალებისთვის:

საკმაოდ რთული და მოცულობითი, ის იყენებს ერთდროულად რამდენიმე მოდულის მეთოდს, აღებული.

მაგალითი 2: მარკირების მონაცემების ჩასმა შაბლონში

ამ მაგალითში, როგორც მარტივი სიმებიანი ველის მნიშვნელობები, ასევე მარკირების მნიშვნელობები ემატება შაბლონს, აქედან აღებული.

P.S.

მე არ დავწერე მაგალითები, თუ აუდიტორია მხარს უჭერს ჩემს ვალდებულებებს, მაშინ შემიძლია ეტაპობრივად აღვწერო რა, როგორ და რატომ და კიდევ რამდენიმე მაგალითი მოვიყვან.

გთხოვთ, დასვით შეკითხვები მოდულის შესახებ ფორუმზე, თუ არის კომენტარები კონკრეტულად სტატიაზე, შემდეგ კომენტარი გააკეთეთ ქვემოთ.

დანამატი სიტყვების შეცვლის განსახორციელებლად სხვადასხვა ანიმაციური ეფექტებით. CSS ეფექტი შესაფერისია პრომო საიტების და ანიმაციური ბანერების განსახორციელებლად.

გვერდის შინაარსის ჩანართებად (ჩანართებად) დაყოფის განხორციელება ანიმაციური CSS3 ეფექტების გამოყენებით. ოთხი ვერსია: ჰორიზონტალური და ვერტიკალური ჩანართები სხვადასხვა ანიმაციური ეფექტებით.

3. საპასუხო jQuery სლაიდერი IMPRESS.JS მოდულის საფუძველზე

მაგარი სლაიდერი 3D ეფექტის იმიტაციით სლაიდებში გადახვევისას. როდესაც თქვენ გაზრდით/ამცირებთ ეკრანის ზომას - იცვლება შრიფტის ზომა, სურათები და სლაიდზე არსებული ყველა ელემენტი, რაც გარანტიას იძლევა სწორი ჩვენების გარანტიას ნებისმიერი ეკრანის გაფართოებისას. უზრუნველყოფილია ავტომატური გადახვევა.

jQuery გადაწყვეტა დოკუმენტის სექციებში მოსახერხებელი ნავიგაციის შესაქმნელად გვერდის გადატვირთვის გარეშე. თითოეული განყოფილება ნაჩვენებია ცალკეულ ბლოკში ვერტიკალური გადახვევით და მათ შორის გადასვლა შეიძლება მოხდეს როგორც მაუსის დაწკაპუნებით, ასევე სათაურის გამოყენებით (დიდი ეკრანის გაფართოებით, სათაური ნაჩვენებია მარცხენა მხარეს, საიტის ნახვისას პატარა ეკრანი - დოკუმენტის თავზე).

შინაარსის ნავიგაციის განხორციელება კატეგორიების სია → სექციების სია → სექციის შინაარსი. ნავიგაციას ახლავს სხვადასხვა JS ეფექტები.

სლაიდებში გადახვევა ხორციელდება პარალაქსის ეფექტით (ფენების გადაადგილება სხვადასხვა სიჩქარით, ერთად ქმნის 3D ეფექტს). სლაიდერის ზომა იცვლება ბრაუზერის ფანჯრის ზომის პროპორციულად.

სლაიდშოუ მუსიკით. შესაძლებელია მუსიკალური კომპოზიციის შეჩერება ან გამოტოვება.

11. თავისებური მენიუ jQuery-სა და CSS-ზე

მენიუს პუნქტის არჩევისას, ზონა მისი შინაარსით გაფართოვდება ზემოთ.

ჩამოსაშლელი ჰორიზონტალური მენიუ ჩადგმული ელემენტების საინტერესო jQuery ეფექტით.

გასაოცარია jQuery CSS მოდული, იქნება ძალიან სასარგებლო დანამატი ნებისმიერი ვებ სტუდიის ან ფრილანსერის ვებსაიტისთვის. მასთან ერთად, თქვენ შეგიძლიათ ვიზუალურად აჩვენოთ შესრულებული სამუშაოს მაგალითები, დაყოფილი დროის მიხედვით. თავად ვადები ნაჩვენებია ბოლოში, ხოლო დასრულებული სამუშაო ნაჩვენებია ზედა. სამუშაოებს შორის ნავიგაციისთვის შეგიძლიათ გამოიყენოთ მასშტაბი ან მარცხენა/მარჯვენა ისრები.

14. TouchTouch გალერეა ოპტიმიზირებულია მობილური დათვალიერებისთვის

15. CSS3 Cycle Slider Image Slider

სახელზე დაწკაპუნებისას გამოჩნდება სურათი აღწერილობით. გამოიყენება მხოლოდ CSS3.
გალერეის გაკვეთილი.

17. მაგარი ფერადი jQuery და CSS3 ინსტრუმენტები

jQuery ინსტრუმენტების რჩევები 7 სტილში. მარტივი დაკავშირება და გამოყენება თქვენს პროექტებში.

თუ გალერეაში 5-ზე მეტი სურათია, მარცხნივ/მარჯვნივ ისრები გამოჩნდება ფოტოების ნავიგაციისთვის.

სლაიდები შეიძლება იყოს არა მხოლოდ სურათები, არამედ სხვა HTML შინაარსი.

მოდული ფოტორეალისტური ჩრდილების შესაქმნელად.

სლაიდერის ახალი დანერგვა.

26. ტექსტის გადატანა „ბეკონი“

გვერდის ტექსტის ახალ ხაზში გადახვევის უჩვეულო ეფექტი მრუდის ან მოცემული ხაზის გარკვეული ოფსეტური ნაბიჯით.

დანამატი ავტომატურად ითვლის შრიფტის ზომას თითოეული სიტყვისთვის ისე, რომ ყველა ტექსტი იკავებს იმავე ფართობს სიგანეში, ხაზის სიტყვების რაოდენობის მიუხედავად.

28. ბლოკის ჩვენების ტიპის შერჩევა CSS3-ის გამოყენებით

ბლოკის ჩვენების ოთხი ტიპი: გამოსახულება აღწერილობით სამ სვეტში, სურათი აღწერილობით ერთ სვეტში, მხოლოდ სურათები, მხოლოდ ტექსტის აღწერა. ბლოკების ჩვენების ტიპის გადასართავად, თქვენ უნდა გამოიყენოთ ზემოთ მოცემული ხატები.

ის უზრუნველყოფს შაბლონების გამოყენების შესაძლებლობას, რაც აადვილებს HTML ელემენტების გენერირებას JavaScript მონაცემთა ობიექტებიდან.

გაუგებრობების თავიდან ასაცილებლად, მინდა გაგაფრთხილოთ, რომ ეს მოდული არ არის აქტიურად განვითარებული ან ამჟამად შენახული და jQuery-ის განვითარების გუნდი არ გირჩევთ მის გამოყენებას. ეს არ ნიშნავს იმას, რომ თქვენ არ უნდა გამოიყენოთ იგი, მაგრამ მე მივიჩნიე, რომ ჩემი მოვალეობა იყო, მოგახსენოთ ამის შესახებ, სანამ მას თქვენს პროექტებში შეიტანთ. სიამოვნებით შემოგთავაზებთ სხვა აქტიურად განვითარებულ ვარიანტს, მაგრამ მე ვერ ვიპოვე jQuery შაბლონების შემცვლელი, რომელიც ახლოსაც კი იქნება. მაგრამ დეველოპერების აღნიშნული დამოკიდებულების მიუხედავად, ეს მოდული მაინც საუკეთესოა.

jQuery Templates მოდულის ისტორია საკმაოდ უჩვეულოა. იმ დროს, Microsoft-მა და jQuery-ის განვითარების ჯგუფმა გამოაცხადეს, რომ Microsoft-ის მიერ შემუშავებულ სამ დანამატს მიენიჭა "ოფიციალური" სტატუსი, რაც აქამდე არცერთ დანამატს არ მიეცა.

გარკვეული პერიოდის შემდეგ, jQuery-ის გუნდმა გამოაცხადა, რომ ამ მოდულების გაუქმება და ოფიციალური სტატუსიდან ამოღება, ისევე როგორც მათი სხვა ფუნქციებით ჩანაცვლების გეგმები. დაგეგმილი ჩანაცვლება უნდა ყოფილიყო jQuery UI ბიბლიოთეკის ნაწილი. სამწუხაროა, მაგრამ მართალია, რომ არაფერი, რაც დაპირებული იყო, ჯერ არ არის მიწოდებული და მოძველებული დანამატები კვლავ ხელმისაწვდომია და ფართოდ გამოიყენება (განსაკუთრებით შაბლონის მოდული).

ცხადია, თითოეული ინდივიდის გადასაწყვეტია, გამოიყენოს თუ არა მოძველებული კოდი, მაგრამ მე პირადად მომწონს შაბლონებით მოწოდებული ფუნქციონალობა და ხშირად ვიყენებ მათ. ამით, მე ვვარაუდობ, რომ ნებისმიერ დროს შემიძლია შევხედო საწყის კოდს და მოვაგვარო ნებისმიერი სერიოზული პრობლემა, თუ ის წარმოიქმნება, და რომ ხანდახან მაინც გიწევს გამოსავლის პოვნა მცირე სირთულეების დასაძლევად. შაბლონები გთავაზობთ..

jQuery შაბლონების ბიბლიოთეკის დაყენება

jQuery შაბლონების გამოყენებამდე უნდა ჩამოტვირთოთ jQuery Templates ბიბლიოთეკა და ჩართოთ თქვენს დოკუმენტში.

გახსენით არქივი და დააკოპირეთ jQuery.tmpl.js (განვითარების ვერსია) ან jQuery.tmpl.min.js (განლაგების ვერსია) ფაილი თქვენს ვებ სერვერზე. შემდეგი რაც უნდა გააკეთოთ არის სკრიპტის ელემენტის დამატება ნიმუში დოკუმენტში, რომელიც მოიცავს შაბლონის ბიბლიოთეკას, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

Ყვავილების მაღაზია

ჩვენ გამოვიყენებთ ამ კოდს, როგორც დოკუმენტის ნიმუში ამ სტატიაში. თქვენ შეიძლება შეამჩნიეთ, რომ იგი განსხვავდება ადრე განხილული ორიგინალური ვერსიისგან არა მხოლოდ იმით, რომ მას დაემატა შაბლონის ბიბლიოთეკა, არამედ იმითაც, რომ მისგან ამოღებულია სხვადასხვა ტიპის ყვავილების პროდუქტების შესაბამისი ელემენტები. ეს კეთდება სპეციალურად ისე, რომ ჩვენ შეგვიძლია აღვადგინოთ ეს ელემენტები დოკუმენტში სხვადასხვა გზით შაბლონის ბიბლიოთეკის გამოყენებით.

წყაროს დოკუმენტის გამოჩენა ბრაუზერის ფანჯარაში ამ ეტაპზე ნაჩვენებია სურათზე:

მარტივი მონაცემთა შაბლონის მაგალითი

მონაცემთა შაბლონების გაცნობის საუკეთესო გზა არის მასში გადასვლა. შაბლონების ძირითადი მახასიათებლების საჩვენებლად, ჩვენ ვიყენებთ კოდს ქვემოთ მოცემული მაგალითიდან:

... ...

შემდეგ განყოფილებებში ჩვენ დავყოფთ მაგალითს ცალკეულ ნაწილებად და გავაანალიზებთ თითოეული მათგანის კოდს ცალკე. როდესაც მონაცემები დოკუმენტის ნაწილია, მას უწოდებენ ინლაინ მონაცემებს. ალტერნატივა არის დისტანციური მონაცემები, რომლებიც ინახება სერვერზე დოკუმენტისგან განცალკევებით. ჩვენ განვიხილავთ დისტანციურ მონაცემებს ცოტა მოგვიანებით, მაგრამ ახლა შეამჩნევთ, რომ ეს საკითხი მჭიდროდ არის დაკავშირებული jQuery ბიბლიოთეკის მიერ მოწოდებულ Ajax-ის მხარდაჭერასთან.

მონაცემთა განსაზღვრა

მაგალითი იწყება მონაცემების განსაზღვრით. ჩვენს შემთხვევაში, მონაცემები არის ობიექტების მასივი, რომელთაგან თითოეული აღწერს ყვავილების წარმოების ცალკეულ ტიპს. შესაბამისი კოდის ფრაგმენტი ქვემოთ მოცემულია:

Var data = [ ( სახელი: "ასტრა", პროდუქტი: "ასტორი", მარაგის დონე: "10", ფასი: 2.99), (სახელი: "ნარცისი", პროდუქტი: "ნარცისი", მარაგის დონე: "12", ფასი: 1.99 ), (სახელი: "ვარდი", პროდუქტი: "ვარდი", მარაგის დონე: "2", ფასი: 4.99), (სახელი: "პეონი", პროდუქტი: "პეონი", მარაგის დონე: "0", ფასი: 1.50), ( დასახელება: "პრიმულა", პროდუქტი: "პრიმულა", მარაგის დონე: "1", ფასი: 3.12), (სახელი: "თოვლის წვეთი", პროდუქტი: "თოვლის წვეთი", მარაგის დონე: "15", ფასი: 0.99), ];

მონაცემები გამოიხატება როგორც ერთი ან მეტი JavaScript ობიექტი. jQuery შაბლონების ბიბლიოთეკა უზრუნველყოფს დიდ მოქნილობას ობიექტების არჩევისას, რომლებიც შეიძლება გამოყენებულ იქნას მონაცემებად, მაგრამ ზემოთ ნაჩვენები ფორმატი ემთხვევა მონაცემთა ფორმატს. JSON, ყველაზე გავრცელებულია. JS0N ფორმატი ძალიან მნიშვნელოვანია, რადგან ის ხშირად გამოიყენება Ajax-თან ერთად.

ამ მაგალითში, მასივი შედგება ექვსი ობიექტისგან, თითოეულს აქვს თვისებების ნაკრები, რომლებიც აღწერს კონკრეტულ პროდუქტს: საჩვენებელი სახელი, პროდუქტის სახელი, ხელმისაწვდომი ერთეულების რაოდენობა და ფასი.

შაბლონის განმარტება

როგორც თქვენ ალბათ მიხვდით, შაბლონის ბიბლიოთეკის ცენტრალური ნაწილი არის მონაცემთა შაბლონი. ეს არის HTML ელემენტების ნაკრები, რომელიც შეიცავს ჩანაცვლების ველებს, რომლებიც შეესაბამება მონაცემთა ობიექტების სხვადასხვა თვისებებს. ამ მაგალითის შაბლონი ნაჩვენებია ქვემოთ:

პირველი, რაც უნდა აღინიშნოს, არის ის, რომ შაბლონი მოთავსებულია სკრიპტის ელემენტში, რომლის ტიპის ატრიბუტი დაყენებულია არარსებული ტიპის მნიშვნელობაზე - text/x-jquery-tmpl. ეს არის იმისათვის, რომ ბრაუზერმა არ შეეცადოს შაბლონის შინაარსის ინტერპრეტაცია, როგორც ნორმალური HTML მარკირება. მიუხედავად იმისა, რომ ეს არსებითი არ არის, ეს პრაქტიკა უნდა დაიცვათ, რადგან ის ძალიან სასარგებლოა და საშუალებას მოგცემთ თავიდან აიცილოთ მრავალი პოტენციური პრობლემა მომავალში.

მეორე პუნქტი, რომელიც მინდა გავამახვილო თქვენს ყურადღებას, არის ის, რომ id ატრიბუტი გამოიყენება სკრიპტის ელემენტზე განსაზღვრული შაბლონის დასასახელებლად. ამ შემთხვევაში, შაბლონის სახელია flowerTmpl. იმისათვის, რომ გამოიყენოთ შაბლონი მონაცემებზე, თქვენ უნდა იცოდეთ მისი სახელი.

შაბლონის შინაარსი გამოყენებული იქნება მონაცემთა ნაკრების ყველა ობიექტზე, რის შედეგადაც მიიღება HTML ელემენტების ნაკრები თითოეული ობიექტისთვის. თქვენ ხედავთ, რომ შაბლონის სტრუქტურა ზოგადად შეესაბამება ელემენტების ერთობლიობას, რომლებიც გამოყენებული იყო წინა სტატიებში სხვადასხვა ტიპის ყვავილების პროდუქტების წარმოსაჩენად. მათ შორის მთავარი განსხვავებაა კოდის ელემენტები, რომლებიც ასრულებენ ჩანაცვლების ფუნქციებს (მონაცემთა ჩანაცვლების დამფუძნებლები).

შაბლონის დამუშავების დროს, თითოეული ადგილის ჩანაცვლება ხდება მიმდინარე ობიექტიდან აღებული ქონების ღირებულებით. მაგალითად, მასივის პირველი ობიექტისთვის ადგილის დამფუძნებელი $(product) შეიცვლება პროდუქტის თვისების მნიშვნელობით, ე.ი. "ასტორი". ასე რომ, ნიმუშის ნაწილი

$(სახელი):

გარდაიქმნება შემდეგ HTML სნიპეტში:

ასტერი:

ღირებულების ჩანაცვლება არ არის ერთადერთი, რისი გაკეთებაც შაბლონებს შეუძლიათ. სხვა შესაძლებლობები განიხილება ქვემოთ.

შაბლონის გამოყენება

შაბლონის მონაცემებთან დასაკავშირებლად გამოიყენეთ tmpl() მეთოდი. ამით თქვენ მიუთითებთ გამოსაყენებელ მონაცემებსა და მასზე გამოსაყენებელ შაბლონს. ამ მეთოდის გამოყენების მაგალითი მოცემულია ქვემოთ:

$("#flowerTmpl").tmpl(data).appendTo("#row1");

აქ ჩვენ ვირჩევთ ელემენტს, რომელიც შეიცავს შაბლონს, ამ მიზნით $() ფუნქციის გამოყენებით და შედეგზე მოვუწოდებთ tmpl() მეთოდს, გადავცემთ მას არგუმენტად იმ მონაცემებს, რომელთა დამუშავებაც გვინდა.

tmpl() მეთოდი აბრუნებს სტანდარტულ jQuery ობიექტს, რომელიც შეიცავს შაბლონიდან ამოღებულ ელემენტებს. ამ შემთხვევაში, შედეგად მიიღება div ელემენტების ნაკრები, თითოეული შეიცავს img, ეტიკეტს და შეყვანის ელემენტებს, რომლებიც კონფიგურირებულია მონაცემთა მასივში შემავალი ერთ-ერთი ობიექტისთვის. იმისათვის, რომ ჩასვათ მთელი ნაკრები რიგის1 ელემენტის შვილად, გამოიყენეთ appendTo() მეთოდი. შედეგი ნაჩვენებია ფიგურაში:

შედეგის მოდიფიკაცია

შედეგი არ არის სრულიად დამაკმაყოფილებელი, რადგან სხვადასხვა ფერის შესაბამისი ყველა ელემენტი ნაჩვენებია ერთ რიგში. მაგრამ რადგან საქმე გვაქვს jQuery ობიექტთან, ელემენტების ისე განლაგება, როგორც ჩვენ გვინდა, დიდი საქმე არ არის. ქვემოთ მოყვანილი მაგალითი გვიჩვენებს, თუ როგორ შეიძლება ამის გაკეთება tmpl() მეთოდის შედეგზე ზემოქმედებით:

... $("#flowerTmpl").tmpl(data) .slice(0, 3).appendTo("#row1").end().end() .slice(3).appendTo("#row2" );

ამ მაგალითში, slice() და end() მეთოდები გამოიყენება შერჩეული ელემენტების სიმრავლის შევიწროებისა და გაფართოებისთვის, ხოლო appendTo() მეთოდი გამოიყენება შაბლონის გენერირებული ელემენტების ქვეჯგუფების დასამატებლად სხვადასხვა რიგებში.

გაითვალისწინეთ, რომ ნაკრების თავდაპირველ მდგომარეობაში დასაბრუნებლად slice() და appendTo() მეთოდების გამოყენებამდე, end() მეთოდი უნდა გამოიძახოთ ზედიზედ ორჯერ. ამაში არაფერია უკანონო და სიამოვნებით ვიყენებ end() მეთოდს, რომ გავაკეთო ის, რაც მჭირდება ერთ განცხადებაში, მაგრამ არ ვარ აღფრთოვანებული end().end() თანმიმდევრობით. ასეთ შემთხვევებში მირჩევნია ქმედებების მთელი თანმიმდევრობა დავყო ცალკეულ ოპერაციებად, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

Var templResult = $("#flowerTmpl").tmpl(მონაცემები); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

ორივე შემთხვევაში, შედეგი იგივე იქნება: პროდუქციის კოლექციის პრეზენტაცია ორ რიგში, რომელთაგან თითოეული ასახავს სამი ტიპის ფერს, როგორც ნაჩვენებია ფიგურაში:

შეცვალეთ შეყვანის მიწოდება

კიდევ ერთი შესაძლო მიდგომაა მონაცემთა tmpl() მეთოდზე გადაცემის წესის შეცვლა. შესაბამისი მაგალითი ნაჩვენებია ქვემოთ:

Vartemplate = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");

ამ სცენარში ელემენტების მწკრივებში განაწილება ხდება შაბლონის გამოყენებით ორჯერ - ერთხელ თითოეული მწკრივისთვის. მონაცემთა ობიექტების შესაბამისი ნაწილი ყოველ ჯერზე გადაეცემა შაბლონს slice() მეთოდის გამოყენებით. ამ მიდგომასა და წინა მიდგომას შორის განსხვავების მიუხედავად, ჩვენ ვიღებთ იგივე შედეგს, რაც ზემოთ იყო წარმოდგენილი.

გამოხატვის შეფასება

მონაცემთა ობიექტები შეიძლება გამოყენებულ იქნას არა მხოლოდ ქონების მნიშვნელობების მისაღებად. თუ JavaScript-ის გამონათქვამს ორ ხვეულ ბრეკეტს შორის მოათავსებთ, შაბლონის ძრავა შეაფასებს მას და ჩასვამს შაბლონის მიერ გენერირებულ HTML-ში. შესაბამისი მაგალითი ნაჩვენებია ქვემოთ:

ამ შაბლონში, შეყვანის ელემენტის მნიშვნელობის ატრიბუტი დაყენებულია stocklevel თვისების მნიშვნელობის საფუძველზე სამჯერადი პირობითი ოპერატორის გამოყენებით. ხუჭუჭა ბრეკეტებში ჩასმული გამოხატულება იგივე როლს ასრულებს, რაც მის ნაცვლად დაწერილი საკუთრების უშუალო მნიშვნელობისაა. თუ stocklevel თვისების ღირებულება ნულზე მეტია, მაშინ მნიშვნელობა დაყენებულია 1-ზე, წინააღმდეგ შემთხვევაში დაყენებულია 0-ზე.

ბრაუზერის ფანჯარაში მიღებული გვერდის ხედი ნაჩვენებია ქვემოთ მოცემულ ფიგურაში. ნულზე მეტი მარაგის დონის მნიშვნელობა დაყენებულია ყველა ფერისთვის, პეონის გარდა:

ეს მაგალითი ასახავს შაბლონებთან მუშაობის ძირითად შაბლონს: მონაცემები გაერთიანებულია შაბლონთან DOM ობიექტების მისაღებად, რომლებიც შემდეგ დაემატება დოკუმენტს jQuery-ის ძირითადი ფუნქციების გამოყენებით. თქვენ შეგიძლიათ გამოიყენოთ როგორც პირდაპირ მოცემული მნიშვნელობები, ასევე გამოთვლილი გამონათქვამები შინაარსის შესაქმნელად.

შაბლონის ცვლადების გამოყენება

შაბლონები არ არის JavaScript. ნებისმიერი კონტენტი, რომელსაც დაამატებთ სკრიპტის ელემენტს, განიხილება შაბლონის ნაწილად და ჩართული იქნება გამოსავალში. შაბლონების უფრო მოქნილი რომ გახადოთ, თქვენ მოგეწოდებათ მცირე რაოდენობის კონტექსტური ცვლადები, რომლებიც შეიძლება გამოყენებულ იქნას ჩანაცვლების აღწერებში. ამ ცვლადების მოკლე აღწერა მოცემულია ქვემოთ მოცემულ ცხრილში:

$data ცვლადის გამოყენებით

$data ცვლადი აბრუნებს მიმდინარე მონაცემთა ელემენტს, რომელზეც გამოიყენება შაბლონი. მაგალითად, გამოყენებული ცვლადი $data, თავის მხრივ, ეხება თითოეულ ობიექტს, რომელიც შეესაბამება ყვავილების ცალკეულ ტიპებს. შაბლონმა გამოიყენა სამმაგი პირობითი ოპერატორი წინა მაგალითში მოცემული მონაცემების მისაღებად. ეს მიდგომა საკმაოდ მისაღებია, თუმცა, მიღებული შაბლონების კითხვა ხშირად იწვევს სირთულეებს, რომელთა თავიდან აცილება, რა თქმა უნდა, სასურველია.

მე ყოველთვის ვცდილობ, რომ ჩემი შაბლონის კოდი მინიმუმამდე შევინარჩუნო, ამიტომ მირჩევნია გამოვიყენო $data ცვლადი JavaScript ფუნქციებში, რომელსაც შემდეგ გამოვიძახებ შაბლონიდან. შესაბამისი დემო ნაჩვენებია ქვემოთ:

ეს მაგალითი განსაზღვრავს stockDisplay() ფუნქციას, რომელიც აბრუნებს მნიშვნელობას, რომელიც უნდა იყოს ნაჩვენები შეყვანის ელემენტში. ამ ფუნქციის არგუმენტი არის მონაცემთა ობიექტი, რომელსაც ვიღებთ შაბლონის შიგნით $data ცვლადის გამოყენებით. იმის გათვალისწინებით, რომ ეს არის უბრალო სამმაგი ოპერატორი, კოდის წაკითხვის სხვაობა წინა ვერსიასთან შედარებით არ არის ძალიან მნიშვნელოვანი, მაგრამ უფრო რთული გამონათქვამების შემთხვევაში ან იმავე შაბლონში გამოხატვის განმეორებით გამოყენების შემთხვევაში, ეს ბევრად უფრო შესამჩნევი იქნება.

ფუნქციების განსაზღვრისას, რომლებიც გამოიძახება შაბლონიდან, ფრთხილად იყავით. საქმე იმაშია, რომ tmpl() მეთოდის გამოძახებამდე ასეთი ფუნქციები უნდა განისაზღვროს. მე ყოველთვის ვცდილობ დავაყენო ისინი სკრიპტის ელემენტის ბოლოს, მაგრამ თუ ფუნქცია უნდა იყოს მზად მოვლენის დამმუშავებლის შიგნით, მაშინ აუცილებლად დარწმუნდით, რომ ის ადრე იყო განსაზღვრული. კიდევ ერთი გავრცელებული შეცდომა ის არის, რომ ფუნქცია ხშირად განისაზღვრება შაბლონის შიგნით.

$() ფუნქციის გამოყენება შაბლონის შიგნით

თქვენ შეგიძლიათ გამოიყენოთ jQuery-ის $() ფუნქცია შაბლონის ჩანაცვლებისთვის, მაგრამ მნიშვნელოვანია გვახსოვდეს, რომ შაბლონის მიერ გენერირებული ელემენტები არ არის მიმაგრებული დოკუმენტზე და, შესაბამისად, არ შედის jQuery-ის შერჩევის ნაკრებებში. მე იშვიათად ვიყენებ ამ ფუნქციას, რადგან, როგორც წესი, უფრო მაინტერესებს ელემენტები და დაკავშირებული მონაცემები, რომლებსაც მე თვითონ ვაწარმოებ.

$item ცვლადის გამოყენებით

$item ცვლადის მიერ დაბრუნებული ობიექტი რამდენიმე რამეს აკეთებს. პირველი არის დამატებითი მონაცემების გაცვლა JavaScript სკრიპტსა და შაბლონს შორის. შესაბამისი მაგალითი ნაჩვენებია ქვემოთ:

ამ მაგალითში ჩვენ ვქმნით ოფციების ობიექტს, რომელიც განსაზღვრავს თვისებას (ფასდაკლებას) და მეთოდს (stockDisplay()). ეს ობიექტი შემდეგ გადაეცემა tmpl() მეთოდს, როგორც მეორე არგუმენტს. ობიექტის თვისებებზე და მეთოდებზე წვდომა შაბლონიდან უზრუნველყოფილია $item ცვლადით. როგორც ხედავთ, ფასში ფასდაკლების დასამუშავებლად, აქ გამოიყენება ოფციების ობიექტის ფასდაკლების თვისება.

მინდა გავამახვილო თქვენი ყურადღება კონტექსტური ცვლადების სახელებში $ პრეფიქსის შეტანის აუცილებლობაზე: $item და $data. იგივე პრეფიქსი ასევე საჭიროა $(...) შაბლონის აღწერის კონსტრუქციაში, რომელიც გამოიყენება შაბლონში მნიშვნელობების ჩანაცვლებისთვის. რომელიმე ამ პრეფიქსის გამოტოვება ერთ-ერთი ყველაზე გავრცელებული შეცდომაა.

ამ ობიექტის სხვა გამოყენებაზე მოგვიანებით ვისაუბრებთ.

ჩადგმული შაბლონების გამოყენება

რთული აპლიკაციების შექმნისას, ზოგჯერ აზრი აქვს დიდი შაბლონის დაშლას რამდენიმე ნაწილად, რომელთა ინტეგრაცია ხდება უკვე განაცხადის შესრულების ეტაპზე. როგორც მოგვიანებით იქნება ნაჩვენები, შაბლონების კომბინირების ეს გზა უზრუნველყოფს უფრო მოქნილ გამომავალ კონტროლს. ჩვენ დავიწყებთ ყველაზე ძირითადით. ქვემოთ მოყვანილი მაგალითი გვიჩვენებს, თუ როგორ შეიძლება ერთი შაბლონი მიმართოს მეორეს:

...

ამ მაგალითში, შაბლონი დაყოფილია ორ ნაწილად. პირველი, flowerTmpl შაბლონი, გამოიძახება მონაცემთა მასივის თითოეული ელემენტისთვის. თავის მხრივ, ეს თარგი უწოდებს inputTmpl შაბლონს შეყვანის ელემენტების შესაქმნელად. მეორე შაბლონს უწოდებენ აღწერის გამოყენებით ((tmpl)). ეს ზარი იღებს სამ არგუმენტს. პირველი ორი არის მიმდინარე ელემენტი და ოფციების ობიექტი; ეს არგუმენტები ჩასმულია ფრჩხილებში. მესამე არგუმენტი არის გამოსაძახებელი შაბლონი. მისი დაყენება შესაძლებელია ან jQuery სელექტორით (როგორც ზემოთ კეთდება), ან სკრიპტში განსაზღვრული ცვლადით ან ფუნქციით.

პირობითი შაბლონების გამოყენება

შაბლონის ძრავა იძლევა შესაძლებლობას დინამიურად მიიღოს გადაწყვეტილებები შაბლონის სხვადასხვა ნაწილების გამოყენებასთან დაკავშირებით, გარკვეული პირობების შესრულების მიხედვით. ეს არის ის, რისთვისაც არის აღწერილობები. ((თუ))და ((/თუ)), რომლის მაგალითი ნაჩვენებია ქვემოთ:

... ((თუ მარაგის დონე > 0))

პირობა მითითებულია ((if)) დესკრიპტორში და შაბლონის ნაწილი, რომელიც ჩასმულია ამ დესკრიპტორსა და ((/if)) დესკრიპტორს შორის, გამოყენებული იქნება მხოლოდ იმ შემთხვევაში, თუ პირობითი შეფასდება ჭეშმარიტად. თუ ეს შედეგი მცდარია, მაშინ შაბლონის მითითებული ნაწილი იგნორირებულია. ამ შემთხვევაში მოწმდება stocklevel ქონების ღირებულება და თუ ის ნულია, მაშინ მთელი flowerTmpl შაბლონი იგნორირებულია. ეს ნიშნავს, რომ ნაჩვენები იქნება მხოლოდ ის პროდუქტები, რომლებიც მარაგშია, როგორც ნაჩვენებია სურათზე:

უფრო რთული პირობების დაზუსტება შესაძლებელია აღწერის გამოყენებით ((სხვა)), რომელიც საშუალებას გაძლევთ მიუთითოთ შაბლონის ის ნაწილი, რომელიც უნდა იქნას გამოყენებული იმ შემთხვევებში, როდესაც აღწერის ((თუ)) გამოხატვის შეფასების შედეგი მცდარია. შესაბამისი მაგალითი ნაჩვენებია ქვემოთ:

... ((თუ მარაგის დონე > 5))

ამ სცენარში, საქონლის ჩვენების ნაკრები განისაზღვრება იმის მიხედვით, თუ რამდენი პროდუქტია კონკრეტული ტიპის საქონლის მარაგში: ხუთზე მეტი, ხუთზე მეტი, ხუთზე ნაკლები ან საერთოდ არ არის. მე მხოლოდ მცირე განსხვავებები შემოვიტანე თითოეული ამ პირობებისთვის გენერირებულ ელემენტებს შორის, მაგრამ თქვენ შეგიძლიათ გამოიყენოთ ეს ფუნქციები სრულიად განსხვავებული შინაარსის შესაქმნელად. და ბოლოს, სხვა შაბლონები შეიძლება პირობითად გამოიძახონ საჭიროების შემთხვევაში.

ზემოაღნიშნული სკრიპტის შედეგი ნაჩვენებია სურათზე:

jQuery-ის გამოშვებით დეველოპერების ცხოვრება ბევრად გამარტივდა. მაგალითად, ჩვენ შეგვიძლია მარტივად გავაკეთოთ შემდეგი:

$("#someElement").children().each(function() ($(this).wrap($("

ეს კოდი ტეგში მოათავსებს ელემენტის ყველა შვილს ID #someElement-ით