css 使用Handlebars遍历数组时保持响应灵活的属性

mnemlml8 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(112)

bounty将在5天内到期。回答此问题可获得+150声望奖励。cts正在寻找一个答案从一个有信誉的来源。

我有以下代码（使用Handlebars，JSFiddle中的工作代码）：

<div class="cards-container">
    {{#each this.cards}}
    <div
      class="card-container container-col-inner col-12 col-md-6 col-lg-3"
    >
      <div class="image-card">
        <div class="image-content">
          <p class="title">{{title}}</p>
        </div>
      </div>
    </div>
    {{/each}}
  </div>

{
  "3columnLayout": false,
  "cards": [
    {
      "title": "Card 1"
    },
    {
      "title": "Card 2"
    },
    {
      "title": "Card 3"
    }
  ]
}

基本上，它遍历cards数组，并为每个项目创建一个card-container div。然后使用bootstrap为每个div分配一个CSS类，例如col-md-6，以便：

移动的：项目显示在单列中
平板电脑：项目显示在2列中
桌面：项目显示在3列中

这一切都按预期工作，并在视觉上给出了所需的UI（无论卡的数量如何）：下面的示例：

然而，正如JSON中所示，我需要一个位于单个卡片级别之外的属性来确定桌面是否应该从4列布局改为3列布局。
我不想为cards数组中的每张卡片重复这个属性，所以我已经重新构造了我的代码，如我在这里的代码片段所示（使用Handlebars）：https://jsfiddle.net/stcfa5wh/20/
然而，这意味着现在我可以访问3columnLayout值：HTML被转储到页面上，我不能再像以前那样使用col。
例如，在tablet上，我可以将每个image-card的宽度设置为50%，但它忽略了对行的需求。
有没有人能提出一种方法来保持HTML结构，同时能够实现一个顶级属性，如3columnLayout？

css

来源：https://stackoverflow.com/questions/76290611/maintaining-responsive-flex-properties-when-iterating-through-array-using-handle

1条答案

按热度按时间

envsm3lx1#

我不明白为什么你在尝试实现3columnLayout标志时停止使用Bootstrap。使用Bootstrap，我们将在每列上使用类col-lg-4来创建3列布局。因此，我们在每一列上需要的条件表达式是：{{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}。

const template = Handlebars.compile(document.getElementById('Template').innerHTML);

const data = {
  "3columnLayout": true,
  "cards": [{
      "title": "Card 1",
    },
    {
      "title": "Card 2",
    },
    {

      "title": "Card 3",

    },
    {
      "title": "Card 4",

    },
    {
      "title": "Card 5",
    },
    {

      "title": "Card 6",
    },
    {
      "title": "Card 7",
    },
    {
      "title": "Card 8",
    }
  ]
}

const output = template(data);

document.getElementById('Output').innerHTML = output;

.image-card {
  height: 432px;
  background-color: lightblue;
  border: 1px solid;
  margin-bottom: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script id="Template" type="text/template">
  <div class="container">
    <div class="row">
      {{#each this.cards}}
        <div class="col-md-6 {{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}">
          <div class="image-card">
            <div class="image-content">
              <p class="title">{{title}}</p>
            </div>
          </div>
        </div>
      {{/each}}
    </div>
  </div>
</script>
<div id="Output"></div>

这里有两个小提琴：one，其中3columnLayout设置为false;而other设置为true。

赞(0）回复(0）举报 2023-05-23

我来回答

css 使用Handlebars遍历数组时保持响应灵活的属性

1条答案

相关问题

热门标签

最新问答