さて、前回の記事で dom 構造のテンプレート文字列をトークン データ構造に変換するコードを作成しました。
次はデータと組み合わせたトークンを使用して dom 文字列を生成する必要があります。
まず、テンプレート文字列とデータ構造を調べてみましょう。
まず、このデータからデータが取得され、次にテンプレート文字列ステートメントで最初にオブジェクト内の Students ループが使用され
、次に各生徒のリストと各添字を使用してループが開始されます。
これは、テンプレート文字列と応答データ間の相互作用として理解することもできます。
次に、src の下に renderTemplate.js というファイルを作成します。
この関数の機能は、トークンを配列から文字列に変換することです。
最初にこのように書きましょう
/*
将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
console.log(tokens,data);
}
まず関数構造を公開し、
パラメータとして、処理したトークン配列と先ほど見たデータを受け取ります。
次に、src の下に作成された Index.js を開いて
、この renderTemplate をインポートして使用します。
ここでは、renderTemplate をインポートして
、その戻り値を受け取ります。渡すのは、以前に処理したトークン配列と、以前に使用したことのないデータです。
次に、プロジェクトを実行する
と、renderTemplate 内のトークンとデータが正常に出力されたことがわかりますが、renderTemplate が戻り値を書き込んでいないため、出力 renderTemplate の戻り結果は現在利用できないはずです。
したがって、トークンとデータを操作する方法を見つける必要があります。
しかし、現在の構造はまだ少し複雑なので、www の下にあるindex.html を次のように変更します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
我超喜欢我家的{
{name}}，我家{
{name}}也超喜欢我
</div>
`;
let data = {
name: "小猫猫",
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
このようにして、データの全体的な結果は非常に単純になります。
次に、renderTemplate コードを次のように変更します。
/*
将tokens数组转为模板字符串
*/
export default function renderTemplate(tokens,data) {
//创建一个字符串 保存结果
let resultStr = "";
//先循环遍历tokens 数组
for(let i = 0;i < tokens.length; i++){
//定义一个token变量 接收当前遍历的下标
let token = tokens[i];
//判断当前是不是text 文本类型的
if(token[0] == "text") {
//因为 text表示内容只是单纯文本 直接追加到结果字符串上就行了
resultStr += token[1];
} /* 判断到如果是name变量名称类型 */ else if(token[0] == "name") {
//在data中找到对应的字段 然后追加在结果字符串上
resultStr += data[token[1]];
}
}
//输出最后结果字符串
console.log(resultStr);
}
まず、コンテンツを格納する結果文字列を定義し
、トークンをループします。前に formConversToken を処理したとき、中括弧の外側の定義が名前として定義され、通常の
テキスト タイプが直接名前として定義されたことを今でも覚えています。結果の文字列に追加されます。
次に名前があり、それをデータ内の対応するフィールドと照合して追加する必要があります。
これは一目瞭然です。
最後に結果
を出力します。結合の結果は次のようになります
。私たちのHTMLコンテンツ
、問題ありません
以下では、シャープ記号を使用したループ文字列の処理を続けます。