使用不含 Angular 的内容填充模板

Question

我有一个 HTML5 新闻卡片的全功能原型，我需要用独特的内容填充大约 50 张卡片。除了从 Excel 电子表格复制、剪切和粘贴之外，我正在征求有关向每张卡片添加内容的更有效方法的建议。电子表格的列包含每张卡片的新闻类别、日期、标题和外部 URL。我还刚刚被要求包括卡片链接到的新闻文章中的图像 - 我无法想象如何将其自动化。该项目在每个卡片的标签上使用 Bootstrap 样式和 data-category 属性，并且是一个 Laravel 网站；它不包括 Angular、Mustache、Handlebars 或模板模式。有没有一种方法可以在不需要安装框架或模板引擎的情况下为这些新闻卡片创建自定义模板？我可以使用数据属性吗？

这是一张卡片的HTML：

<div class="col-lg-4 col-md-6">
  <section class="news-box" data-category="blog">            
    <figure>
      <img src="/material-icons/ic_recent_actors_black_24dp/web/ic_recent_actors_black_24dp_2x.png" class="img-responsive opacity-3">
      <figcaption>Blog</figcaption>
    </figure>
    <h3 class="h6">Title of Blog Post</h3>
    <figure>
        <img src="images/news/pic2.jpg" class="img-responsive">
    </figure>
    <p>luctus et ultrices posuere cubilia Curae; quam erat volutpat. Phasellus dignissim euismod luctus.In leo mauris, blandit quismalesuada lobortis, fringilla a ipsum.</p>
  </section>
</div>

Answer 1

所以这可能不是最佳答案，但这是我的 2 美分。

您首先必须将 Excel sheet 转换为 csv，然后再转换为 json 对象。我认为这可以通过这样的在线转换器轻松实现：http://www.convertcsv.com/csv-to-json.htm（我自己还没有尝试过，只是粘贴了第一个 google 结果）。您的 json 对象将看起来像 var foo = [{...},{...},...]（参见代码片段）
使用 card_title card_img 等虚拟占位符创建 "card template"。隐藏它。
在您的 js 文件中，遍历 json 对象中的所有元素，并使用您刚刚创建的模板替换所有占位符。 (var newItem = myTemplate.replace('blog_title',val.blog_title)...)
将生成的 html 片段附加到卡片容器。

$(document).ready(function(){
  var template = $(".card-template").html(); //get the card template html
  $.each(foo, function(idx, val){ //iterate over the json object
    var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
    $(".cards-container").append(newCard); //append the card to the container row
    });
                   
  });


var foo = [
  {
    'title':'Gotta catch em all',
    'img':'http://i.imgur.com/tmgWXUP.jpg',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  },
  {
    'title':'Trumpers trumping Trump',
    'img':'http://i.imgur.com/C7z53mE.gif',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  },
  {
    'title':'Aint no hacker',
    'img':'http://i.imgur.com/vQGnFD4.jpg',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  }
]

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row cards-container">
  <!-- inject cards here -->
</div>

<div class="card-template hide">
  <div class="col-xs-3">
  <h2>card_title</h2>
  <img src="card_image" class="img-responsive">
  <p>card_content</p>
  </div>
</div>

您也可以尝试使用 vanilla js 来实现，但这取决于您。

Answer 2

$(document).ready(function(){
  var template = $(".card-template").html(); //get the card template html
  $.each(foo, function(idx, val){ //iterate over the json object
    var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
    $(".cards-container").append(newCard); //append the card to the container row
    });
                   
  });


var foo = [
  {
    'title':'Gotta catch em all',
    'img':'http://i.imgur.com/tmgWXUP.jpg',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  },
  {
    'title':'Trumpers trumping Trump',
    'img':'http://i.imgur.com/C7z53mE.gif',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  },
  {
    'title':'Aint no hacker',
    'img':'http://i.imgur.com/vQGnFD4.jpg',
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
  }
]

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row cards-container">
  <!-- inject cards here -->
</div>

<div class="card-template hide">
  <div class="col-xs-3">
  <h2>card_title</h2>
  <img src="card_image" class="img-responsive">
  <p>card_content</p>
  </div>
</div>

使用不含 Angular 的内容填充模板

Populate templates with content without Angular

frontend

template-engine