使用没有 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 美分。

1. 您首先必须将 Excel 工作表转换为 csv，然后再转换为 json 对象。我认为这可以通过这样的在线转换器轻松实现：http://www.convertcsv.com/csv-to-json.htm（我自己没有尝试过，只是粘贴了第一个谷歌结果）。然后，您的 json 对象将看起来像 var foo = [{...},{...},...]（参见代码片段）

2. 使用 card_title card_img 等虚拟占位符创建您的“卡片模板”。隐藏它。

3. 在您的 js 文件中，遍历 json 对象中的所有元素，并使用您刚刚创建的模板替换所有占位符。 (var newItem = myTemplate.replace('blog_title',val.blog_title)...)

4. 将生成的 html sn-p 附加到卡片容器中。

$(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>