Question

我以前here问过这个问题。我仍在为该Handlebars项目开发解决方案。我已经取得了进步，但是我仍然需要帮助。

现在，我有了使用<script id="" type="text/x-handlebars-template">语法的有效原型。

该模板的目的是构建一个可编辑的脚本列表，以根据本教程使用Gulp-useref进行加载以进行串联。 https://css-tricks.com/gulp-for-beginners/#article-header-id-10

现在，下一步是将我的原型转换为部分模板并将其合并到我的较大项目中。

我需要一些示例，这些示例显示在哪里插入局部数据和/或局部数据路径。我有一个模板，但是没有访问数据。我需要帮助，以了解如何以及在何处放置指向部分数据的链接-在页面模板中，还是在我的js02模板部分中？我是否应该将数据包括在{{#inline block}}元素中？我希望能够更改数据索引上的脚本以自定义各个页面上的列表。

在我的JavaScript文件中，我使用的是Handlebars.registerHelper，它使用Handlebars.SafeString呈现脚本。数据也位于同一文件中。

我在http://craigwebbart.com/prototypes/Concat_Scripts_Template_02.html上有工作原型的示例，在https://codepen.io/cwebba1/project/full/AENqnV上的CodePen项目上也有

模板中的所有数据均以HTML格式显示在元素和中，因此您需要查看控制台中的“元素”标签以查看结果。

这是我的原型中的代码，下面是代表我当前的非工作页面和部分模板的代码。我的目标是使数据显示在已编译的模板中，并能够在单个页面上编辑数组。

工作原型：

HTML：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <head>
      <title>
        Craig Webb Art / Concatenate Scripts Template 02
      </title>
      <!-- Concat_Scripts_Template_02.html  -->
      <!-- 070719 -->
      <!-- https://learn.co/lessons/javascript-handlebars-templates  -->

      <!-- Fonts -->
      <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,200,300,600,' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" type="text/css" href="css/prototype_style.css">

<script type="text/javascript" src="assets/js/handlebars-v4.1.2.js"></script>
<script type="text/javascript" src="script_01.js"></script>
    </head>

    <body>
      <div class="basal">
        <header>
          <h1>Concatenate Scripts Template 02</h1>
        </header>

        <main id="main">
          <a href="#" onclick="loadScripts();">Load Scripts</a>
        </main>

        <script id="custom-scripts-template" type="text/x-handlebars-template">
          {{#each this}}
    <!-- {{title}} -->
    <!-- {{description}} -->
          <!--build:js assets/js/{{output}}.js -->
   {{#each inputs}}
{{input}}
  {{/each}}
  <!-- endbuild -->
  {{/each}}
        </script>
      </div>
      <!-- END "basal" -->
    </body>
    <script type=t ext/javascript></script>
</html>

JAVASCRIPT：

// script_01.js

Handlebars.registerHelper('input', function() {
    return new Handlebars.SafeString("<script src='assets/js/" + this.input + ".js'><\/script>" + "\n")
  }
)

function loadScripts() {
  var template = Handlebars.compile(document.getElementById("custom-scripts-template").innerHTML);
  var result = template(scripts);
  document.getElementsByTagName("main")[0].innerHTML += result;
}

var scripts = [
{
   "title" : "Craig Webb List Scripts 01",
    "description" : "Custom Script List for Concatenation",
    "output" : "main",
   "inputs" : [
       {
          "input" : "JQuery"
       },
       {
          "input" : "lightbox"
       },
       {
          "input" : "slider"
       }
   ]
}
]

结果，显示在控制台中：

<main id="main">
          <a href="#" onclick="loadScripts();">Load Scripts</a>

    <!-- Craig Webb List Scripts 01 -->
    <!-- Custom Script List for Concatenation -->
          <!--build:js assets/js/main.js -->
<script src="assets/js/JQuery.js"></script>

<script src="assets/js/lightbox.js"></script>

<script src="assets/js/slider.js"></script>

  <!-- endbuild -->
        </main>

使用部分的非工作模板：

Partial和JavaScript的结构：我的应用程式/ 局部/布局/ cwebba-base-02 / pages / scripts-test.hbs 局部/includes/js02.hbs 资产/js/script_02.js

CWEBBA-BASE-02：

{{!-- layouts/cwebba-base-02.hbs --}}
<!doctype html>
<html>
. . .
  <body>
<div class="basal">
. . .
</div><!-- END "basal" -->
<div id="jsblock">
      {{#> js02-block}}
        {{!--
          The `includes/js` partial is the default content,
          but can be overridden.
        --}}
        {{> includes/js02 }}
      {{/js02-block}}    
</div>
  </body>
</html>

SCRIPTS-TEST.HBS（页面）：

{{!-- pages/scripts-test.hbs --}}
{{#> layouts/cwebba-base-02 title="Craig Webb Art / Load Scripts Test" }}
. . .

<!-- This is the script for the Handlebars template and data. -->
<script type="text/javascript" src="assets/js/script_02.js"></script>

 {{!-- Customize page JS before concatenation. --}}
   {{#*inline "js02-block"}}
    {{> includes/js02}}
  {{/inline}}

{{/layouts/cwebba-base-02}}

JS02.HBS

{{!-- includes/js02.hbs --}}
{{#each this}}
    <!-- {{title}} -->
    <!-- {{description}} -->
<!--build:js assets/js/{{output}}.js -->
  {{#each inputs}}
{{input}}
  {{/each}}
  <!-- endbuild -->
  {{/each}}

SCRIPT_02.JS：

        // script_02.js
        Handlebars.registerHelper('input', function() {
            return new Handlebars.SafeString("<script src='assets/js/" + this.input + ".js'><\/script>" + "\n")
          }
        )

        var scripts = [
        {
           "title" : "JavaScript Scripts List 01",
            "description" : "Generic Scripts List for Concatination",
            "output" : "main",
           "inputs" : [
               {
                  "input" : "JQuery"
               },
               {
                  "input" : "lightbox"
               },
               {
                  "input" : "slider"
               }
           ]
        }
        ]

document.addEventListener("DOMContentLoaded", function() {
  var template = Handlebars.compile(document.querySelector("js02").innerHTML);
  var result = template(scripts);
  document.querySelector("#jsblock")[0].innerHTML += result;
});

您可以看到我正在尝试在cwebba-base-02头内以及页面js02块上方的两个位置加载JavaScript文件。我在问如何将数据连接到局部。

此外，在JavaScript上，我已将loadScript（）交换为document.addEventListener。我不知道如何在脚本中命名或指向js02.hbs部分。模板加载但没有接收数据。

请帮助。

如何连接车把模板，部分，JavaScript和数据？

0 个答案: