从不谈论填充普通视图
Never talking about populate a normal view
我听到很多关于填充 table 的信息。当我在 google 上查找时,有一个关于如何做到这一点的完整宇宙 post。但是让我们谈谈填充视图!
是的,你没听错!我认为这是每个人第一次都会做的最简单、最正常的方式。
我要创建一个列表!在这个简单的列表中,我想显示句子。看起来像这样:https://www.dropbox.com/s/swm1n9ezled0ppd/img.jpg?dl=0
我的想法是为每个项目使用一个 div,其中包含一个标题等等。但是我如何在 javascript 的帮助下填充 div?最重要的是如何将 div 的标题设置为不同的值?
如何通过 JavaScript 做到这一点,或者还有其他我不知道的更好的方法吗?
编辑:
db.collection("classes").doc(data.readGrades).get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
const data = doc.data();
const members = data.members;
var permission_table = document.getElementById("noten_tabelle_permission");
var permission_table_container = document.getElementById("main_padding");
members.forEach(el => {
console.log(el)
table_number++;
clone = permission_table.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "layout_table" + table_number;
permission_table_container.appendChild(clone);
db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
const data = doc.data();
//addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
//window.alert("Table name: " + ["grade_table" + table_number])
//____________________________________________________________________________
const html = fillTemplate("grade_table" + table_number, "test", data.mdl, data.klu);
// Join the array of html and add it as the `innerHTML` of `main`
document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);
addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
});
});
})
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
这里是你编辑的 write 函数:
function fillTemplate({ table_name, id, subject, mdl, klu }) {
return `
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name">${id}</h1>
<table id="${table_name}" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
`;
}
还有另一个函数:
function addToTable(table_name, subject, mdl, klu) {
var subject_name = getSubjectByNumber(subject);
var short_subject = getSubjectShortByNumber(subject);
//Zeile erstellen
var y = document.createElement([short_subject]);
y.setAttribute("id", [short_subject]);
document.getElementById([table_name]).appendChild(y);
//Spalten in einer Zeile
var y = document.createElement("TR");
y.setAttribute("id", [short_subject]);
//Spalten in einer Zeile
var cE = document.createElement("TD");
var tE = document.createTextNode([subject_name]);
cE.appendChild(tE);
y.appendChild(cE);
var a = document.createElement("TD");
var b = document.createTextNode([mdl]);
a.appendChild(b);
y.appendChild(a);
var c = document.createElement("TD");
var d = document.createTextNode([klu]);
c.appendChild(d);
y.appendChild(c);
document.getElementById(table_name).appendChild(y);
}
这里是 HTML:
<div class='main_has_permission' id="main_has_permission" style="display: none;">
<div class='main_padding' id="main_padding">
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name"></h1>
<table id="grades_table" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
</div>
</div>
提前致谢。
~卡尔
好的,所以我有点无聊:)所以我编了一个例子来帮助你。它包含:
1) 包含您的数据的 object 数组。每个 object 都有一个标题、一系列流派和年份。
2) 它使用 map
遍历数据数组并为每个 object.
调用 fillTemplate
3) fillTemplate
returns 使用每个数组 object 的数据完成 template literal。注意:因为 genre
是一个 数组 流派,我们使用 join
将数组元素连接到一个列表中。
4) 它使用 CSS flex model 来设置 HTML 的样式。
const data = [{ title: 'Mad Max: Fury Road', genre: ['Action & Adventure'], year: 2015 }, { title: 'Inside Out', genre: ['Animation', 'Kids & Family'], year: 2015 }, { title: 'Star Wars: Episode VII - The Force Awakens', genre: ['Action'], year: 2015 }];
function fillTemplate({ title, genre, year }) {
return `
<section class="panel">
<div class="left">
<div class="title">${title}</div>
<ul class="genres">
<li class="genre">${genre.join('</li><li class="genre">')}</li>
</ul>
</div>
<div class="year">${year}</div>
</section>
`;
}
// For each array object call `fillTemplate` which returns a new
// array element of HTML
const html = data.map(obj => fillTemplate(obj));
// Join the array of html and add it as the `innerHTML` of `main`
document.querySelector('main').innerHTML = html.join('');
main { display: flex; flex-direction: column; }
.panel { width: 60%; display: flex; padding: 0.5em; margin: 0.2em 0 0.2em 0; border: 1px solid #565656; background-color: #efefef; flex-direction: row; align-items: flex-start; }
.genres { margin: 0.3em 0 0 0; padding-left: 0; list-style-type: none; }
.panel div:first-child { width: 100%; }
.genre { display: inline-flex; margin-right: 0.4em; }
.title { font-weight: 600; font-size: 1.1em; }
.year { text-align: right; }
<main></main>
我听到很多关于填充 table 的信息。当我在 google 上查找时,有一个关于如何做到这一点的完整宇宙 post。但是让我们谈谈填充视图!
是的,你没听错!我认为这是每个人第一次都会做的最简单、最正常的方式。
我要创建一个列表!在这个简单的列表中,我想显示句子。看起来像这样:https://www.dropbox.com/s/swm1n9ezled0ppd/img.jpg?dl=0
我的想法是为每个项目使用一个 div,其中包含一个标题等等。但是我如何在 javascript 的帮助下填充 div?最重要的是如何将 div 的标题设置为不同的值?
如何通过 JavaScript 做到这一点,或者还有其他我不知道的更好的方法吗?
编辑:
db.collection("classes").doc(data.readGrades).get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
const data = doc.data();
const members = data.members;
var permission_table = document.getElementById("noten_tabelle_permission");
var permission_table_container = document.getElementById("main_padding");
members.forEach(el => {
console.log(el)
table_number++;
clone = permission_table.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "layout_table" + table_number;
permission_table_container.appendChild(clone);
db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
const data = doc.data();
//addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
//window.alert("Table name: " + ["grade_table" + table_number])
//____________________________________________________________________________
const html = fillTemplate("grade_table" + table_number, "test", data.mdl, data.klu);
// Join the array of html and add it as the `innerHTML` of `main`
document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);
addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
});
});
})
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
这里是你编辑的 write 函数:
function fillTemplate({ table_name, id, subject, mdl, klu }) {
return `
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name">${id}</h1>
<table id="${table_name}" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
`;
}
还有另一个函数:
function addToTable(table_name, subject, mdl, klu) {
var subject_name = getSubjectByNumber(subject);
var short_subject = getSubjectShortByNumber(subject);
//Zeile erstellen
var y = document.createElement([short_subject]);
y.setAttribute("id", [short_subject]);
document.getElementById([table_name]).appendChild(y);
//Spalten in einer Zeile
var y = document.createElement("TR");
y.setAttribute("id", [short_subject]);
//Spalten in einer Zeile
var cE = document.createElement("TD");
var tE = document.createTextNode([subject_name]);
cE.appendChild(tE);
y.appendChild(cE);
var a = document.createElement("TD");
var b = document.createTextNode([mdl]);
a.appendChild(b);
y.appendChild(a);
var c = document.createElement("TD");
var d = document.createTextNode([klu]);
c.appendChild(d);
y.appendChild(c);
document.getElementById(table_name).appendChild(y);
}
这里是 HTML:
<div class='main_has_permission' id="main_has_permission" style="display: none;">
<div class='main_padding' id="main_padding">
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name"></h1>
<table id="grades_table" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
<!-- Make content with js code -->
</table>
</div>
</div>
</div>
提前致谢。 ~卡尔
好的,所以我有点无聊:)所以我编了一个例子来帮助你。它包含:
1) 包含您的数据的 object 数组。每个 object 都有一个标题、一系列流派和年份。
2) 它使用 map
遍历数据数组并为每个 object.
fillTemplate
3) fillTemplate
returns 使用每个数组 object 的数据完成 template literal。注意:因为 genre
是一个 数组 流派,我们使用 join
将数组元素连接到一个列表中。
4) 它使用 CSS flex model 来设置 HTML 的样式。
const data = [{ title: 'Mad Max: Fury Road', genre: ['Action & Adventure'], year: 2015 }, { title: 'Inside Out', genre: ['Animation', 'Kids & Family'], year: 2015 }, { title: 'Star Wars: Episode VII - The Force Awakens', genre: ['Action'], year: 2015 }];
function fillTemplate({ title, genre, year }) {
return `
<section class="panel">
<div class="left">
<div class="title">${title}</div>
<ul class="genres">
<li class="genre">${genre.join('</li><li class="genre">')}</li>
</ul>
</div>
<div class="year">${year}</div>
</section>
`;
}
// For each array object call `fillTemplate` which returns a new
// array element of HTML
const html = data.map(obj => fillTemplate(obj));
// Join the array of html and add it as the `innerHTML` of `main`
document.querySelector('main').innerHTML = html.join('');
main { display: flex; flex-direction: column; }
.panel { width: 60%; display: flex; padding: 0.5em; margin: 0.2em 0 0.2em 0; border: 1px solid #565656; background-color: #efefef; flex-direction: row; align-items: flex-start; }
.genres { margin: 0.3em 0 0 0; padding-left: 0; list-style-type: none; }
.panel div:first-child { width: 100%; }
.genre { display: inline-flex; margin-right: 0.4em; }
.title { font-weight: 600; font-size: 1.1em; }
.year { text-align: right; }
<main></main>