我试图使以下代码更易于维护。我不是网络开发人员,所以请多多包涵。我认为以下方法是合适的。

我想使用javascript或jQuery将内容和属性动态添加到html文件中。这些项目可以驻留在.csv.json(或其他?)文件中。



给定这样的内容

<div class="filtr-container">

    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="cat-1" data-date="2018-02-09">
        <div class="card-inner-border box-shadow">
            <a href="address-1.html">
                <img class="card-img-top rounded-top" src="./images/image-1.jpg" alt="img-2-alt">
            </a>
            <div class="card-body">
                <h5 class="card-title">Title-1</h5>
                <p class="card-text card-desc">
                    This is a description for title-1 content.
                </p>
                <a href="address-1.html">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                </a>
                <p class="card-text">
                    <small class="text-muted">Last updated February 2, 2018</small>
                </p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="cat-2, cat-3" data-date="2018-02-14">
        <div class="card-inner-border box-shadow">
            <a href="address-2.html">
                <img class="card-img-top rounded-top" src="./images/image-2.jpg" alt="img-2-alt">
            </a>
            <div class="card-body">
                <h5 class="card-title">Title-2</h5>
                <p class="card-text card-desc">
                    Here is a long description for title-2 content.
                </p>
                <a href="address-2.html">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                </a>
                <p class="card-text">
                    <small class="text-muted">Last updated February 14, 2018</small>
                </p>
            </div>
        </div>
    </div>

    <!-- MANY MORE CARDS / ITEMS ... -->

</div> <!-- End of filtr-container -->


我认为我们可以将细节抽象成这样的形式(.csv)

item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,image-1.jpg,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,"cat-2, cat-2",address-2.html,image-2.jpg,img-2-alt,2018-02-14




使用javascript或jQuery从.csv或.json文件添加此内容的一种不错的攻击方法是什么?

一些问题:


.csv的标题不逐字匹配(例如<p class="card-desc">.csvdescription标题对齐)
可能包含嵌入的逗号分隔项目(例如,项目2具有类别cat-2, cat-3,因此它在"中获得了引号.csv-也许.json会更好(?),或者可能不是问题)
如果可能,我们可以将date项目重用于data-date=和最后一个文本<small class="text-muted">,它将日期转换为Last updated month-name-long, dd, yyyy而不是yyyy-mm-dd
某些属性是部分引用(例如,图像的src只是路径的最后一部分;在image-1.jpg中不是.csv表示为./images/image-jpg)。




为了希望减轻这种麻烦,下面是一张带有突出显示的元素的图片,可以从.csv文件中对其进行“引用”。

javascript - 如何使用csv或json文件中的javascript或jQuery引用项目向HTML动态添加项目和属性-LMLPHP

对我来说,这就像:


读入.csv文件。
对于.csv文件中的每一项,请使用外壳布局将对象附加到$(".filtr-container")


但是,如果涉及到细节或那是适当的方法,我会迷失方向。

最佳答案

您似乎正在搜索模板解析。您可以找到许多可以减轻这种负担的库。模板解析以最简单的形式执行以下代码中的步骤。如果您不需要模板解析器库或完整框架的灵活性,功能,功能等,如果要完成的工作如下所示,则应考虑不包括数千行代码。

自从您提到JSON和CSV以来,我已经包含了解析这两种代码的代码。我将把AJAX和日期格式化魔术留给您。我也不认为我会填充ID,但这表明比模板属性更多的数据可以正常工作。



let template = document.getElementById('card-template').innerHTML;
let container = document.querySelector('.filtr-container');

// Do some ajax magic to get csv file
let csv = `item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,https://via.placeholder.com/75,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,cat-2 cat-2,address-2.html,https://via.placeholder.com/75,img-2-alt,2018-02-14`;

let csvLines = csv.split("\n");
let csvHeaders = csvLines.shift().split(',');
csvLines.forEach(line => {
  let parsed = template;
  let props = line.split(',');
  props.forEach((prop, idx) => {
    parsed = parsed.replace('{{' + csvHeaders[idx] + '}}', props[idx]);
  });
  container.innerHTML = container.innerHTML + parsed;
});

let json = `[{
  "item-id": "1",
  "title": "Title-1",
  "description": "This is a description for title-1 content.",
  "categories": "cat-1",
  "address": "address-1.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-1-alt",
  "update": "2018-02-09"
}, {
  "item-id": "2",
  "title": "Title-2",
  "description": "Here is a long description for title-2 content.",
  "categories": "cat-2 cat-2",
  "address": "address-2.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-2-alt",
  "update": "2018-02-14"
}]`;

let data = JSON.parse(json);
data.forEach(col => {
  let jParsed = template;
  for (prop in col) {
    jParsed = jParsed.replace('{{' + prop + '}}', col[prop]);
  }
  container.innerHTML = container.innerHTML + jParsed;
});

<div class="filtr-container">

  <script type="template" id="card-template">
    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="{{categories}}" data-date="{{date}}">
      <div class="card-inner-border box-shadow">
        <a href="{{address}}">
          <img class="card-img-top rounded-top" src="{{image}}" alt="{{image-alt}}">
        </a>
        <div class="card-body">
          <h5 class="card-title">{{title}}</h5>
          <p class="card-text card-desc">
            {{description}}
          </p>
          <a href="{{address}}">
            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
          </a>
          <p class="card-text">
            <small class="text-muted">Last updated {{update}}</small>
          </p>
        </div>
      </div>
    </div>
  </script>

关于javascript - 如何使用csv或json文件中的javascript或jQuery引用项目向HTML动态添加项目和属性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54349766/

10-12 13:01
查看更多