Как мне динамически изменять значение css стилей в Handlebars? - PullRequest
Новая
       79

Как мне динамически изменять значение css стилей в Handlebars?

0 голосов
/ 17 июня 2020

В последнее время я изучаю Handlebars. Я решил, что хочу создать полосу прогресса навыков. У меня есть файл json со списком навыков [{"name": "html", "level": 90}, {"name": "js", "level": 75} и т. Д. c ..]. Я перебираю некоторые html с помощью Handlebars. Теперь я хочу использовать значение «level» и применить его к каждому экземпляру моей гистограммы html. Я знаю, как это сделать с ванилью JS. Но это совсем другая история. Я пробовал различные методы, такие как настраиваемые помощники, но Handlebars не распознает элементы DOM (или, по крайней мере, об этом мне говорит ошибка). В документации нет ясности по этому поводу, и все примеры не решают эту проблему. Мне нужна помощь. Заранее спасибо! 

const path = require('path');

const express = require('express');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
const Skills = require('./models/skills');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

var hbs = exphbs.create({
    extname: 'html',
    helpers: {
        growBar: function (val) {
            let elem;
            let i = 0;
            if (i == 0) {
                i = 1;
                let width = 1;
                let id = setInterval(frame, 10);
                function frame() {
                    if (width >= val) {
                        clearInterval(id);
                        i = 0;
                    } else {
                        width++;
                    }
                }
            }
        }
    }
});
app.engine('html', hbs.engine);
app.set('view engine', 'html');

app.get('/', (req, res) => {
    Skills.fetchAll(skill_data => {
        res.render('bar-graph', {
            level: skill_data.level,
            skills: skill_data,
            hasSkills: skill_data > 0,
            title: "My First Bar Graph",
        });
    });
});

const port = 3000;
app.listen(port, () => console.log(`App listening on ${port}`));
body {
    font-family: 'MuseoModerno', open-sans;
    font-weight: 400;
    width: 100%;
    margin: 0;
}
h4 {
    margin: 0;
    font-size: 14px;
}

.container {
    height: auto;
   padding: 10px 10px 0 10px; 
}
.myProgress {
    height: 30px;
    width: 100%;
    background-color: rgb(223, 219, 219);
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
}
.bar-name {
    padding-left: 10px;
    width: 100px;
    height: 30px;
    background-color: indianred;
}

.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}
<div class="container" id="skills-bar" onload="move()">
    <section>
        <h1>{{ title }}</h1>
    </section>

    {{#each skills}}
    <div class="flex-col">
        <div class="flex-row">
            <h4 class="bar-name">{{ this.name }}</h4>
            <div class="myProgress">
            <div id="myBar" style="width: {{growBar level}}%" ></div>
            </div>
        </div>
        {{/each}}
    </div>
</div>

введите код здесь

...