I,m studying Ember, and I have a few questions to understand the basic principles. I believe that this concerns the key points. Let me show you a little code, which is the boilerplate for me with typical tasks. There is an onclick functions, data recieving from JSON, change an attributes of html using the received data. These are the tasks that I want to understand most of all, and I will be very grateful to you for any help! Please tell me how to implement all of this in the spirit of Ember? I need to get the same result that will be reused in several routes, that is, different JSON will be processed. Perhaps the code should be contained in the component, but I could be wrong. I really like Ember, everything is in its place here, and I really would like to figure out in which parts of Ember it needs to be separated (for example, the hbs template, the route and other parts that are needed), so what where should be placed. I find it difficult to explain, but I think you will understand me. Great thanks in advance for any help! Excuse me my french)
Here is listing:
<!DOCTYPE html>
<html lang="en">
<body>
<script src="data.json"></script>
<div class="container">
<div class="wrapper">
<div id="items" style="display: flex; justify-content: space-between;">
<div id="a" onclick="getData(this.id)" style="width: 100px; height: 100px; background-color: coral"></div>
<div id="b" onclick="getData(this.id)" style="width: 100px; height: 100px; background-color: coral"></div>
<div id="c" onclick="getData(this.id)" style="width: 100px; height: 100px; background-color: coral"></div>
<div id="d" onclick="getData(this.id)" style="width: 100px; height: 100px; background-color: coral"></div>
<div id="e" onclick="getData(this.id)" style="width: 100px; height: 100px; background-color: coral"></div>
</div>
<br><br>
<select name="getValues" id="getValues" style="display: block;">
<option value="first">First values</option>
<option value="second">Second values</option>
</select>
<br><br>
<button onclick="setData()" class="waves-effect waves-light btn-large xbutton">SELECT</button>
</div>
</div>
<script>
function getData(clicked_id) {
let selectValue = document.getElementById("getValues").value;
alert("Value = " + parseFloat(data[selectValue][clicked_id]));
}
function setData() {
let selectValue = document.getElementById("getValues").value;
for (x in data[selectValue]) {
let n = data[selectValue][x];
if (n < 15)
document.getElementById(x).style.backgroundColor = "red";
if (n >= 15 && n < 50)
document.getElementById(x).style.backgroundColor = "green";
if (n >= 50 && n < 100)
document.getElementById(x).style.backgroundColor = "blue";
if (n >= 100)
document.getElementById(x).style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>
Here is JSON file:
var data = {
"first": {
"a": 14,
"b": 37,
"c": 117,
"d": 893,
"e": 11
},
"second": {
"a": 89,
"b": 777,
"c": 9,
"d": 3,
"e": 57
}
};
Aucun commentaire:
Enregistrer un commentaire