Loading...
outlaw avatar outlaw 8 Точки

[Templating - Exercise][02. HTTP Status Cats]

Добър вечер на всички!

Бих искал да помоля, ако някой разбира условието на горепосочената задача, да ме светне какво точно се иска. Всички котки ли трябва да се показват на страницата? Или само да направим техните бутони да си работят коректно? Какъв Template искат да се направи? От условието поне аз почти нищо не разбрах.

Поздрави!

Тагове:
0
JavaScript Applications
vasilivanov93 avatar vasilivanov93 43 Точки
Best Answer

Условието на задачата е да изчистиш "body"-то на файла "cats.html" като направиш файл с темплейт за котките "cat-template.hbs", а в  "body"-то да оставиш само пътя до "template.js". Така трябва да изглежда твоя темплейт: https://pastebin.com/a5yC25GQ

 В "template.js" трябва да заредиш своя темплейт като използваш handlebars, т.е

(

let source = await $.get(`./cat-template.hbs`);
let compiled = Handlebars.compile(source);
let template = compiled({
cats: window.cats
        });

$('body').append(template);

). На първият ред зареждаш темплайта, който си направил, след това го "compile"-ваш с handlebars, а на третият ред зареждаш данните за всички котки от файла "catSeeder.js" като всички данни за котките са закачени за "window"-a. След това на "body"-то на "cats.html" "append"-ваш променливата "template". По този начин ще ти се визуализират картинките с всички котки. За бутона :

(

$('button').on('click', (event) => {
            let targetBtn = $(event.target);
            let divInfo = targetBtn.next();
            let textBtn = targetBtn.text();

            if (textBtn.includes('Show')) {
                targetBtn.text(textBtn.replace('Show', 'Hide'))
            } else {
                targetBtn.text(textBtn.replace('Hide', 'Show'))
            }

            divInfo.toggle();  
        })

). Като хванеш всички бутони им закачаш един евент и на него му казваш, че при натиснат бутон и визуализация на информацията за дадената котка текста на бутона, ако съдържа "Show" трябва да се промени на "Hide" и обратно. С "toggle()" правиш показването и скриването на инфорнацията на дадената картинка.

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.