javascript - 使用 Handlebars.js 创建响应式网格结构

Question

我正在使用 handlebars.js 并尝试创建一个响应式网格结构 - 但是我无法弄清楚如何使用 Handlebars 创建结构!

我不知道如何组织 div 和脚本，以便结果显示在单独的“面板”中!目前，它们仅显示在一个长列中，彼此重叠。

我可以让它与普通的 div 一起工作，但是当我添加 Handlebars 和脚本时就不行了。

我认为有一个简单的变化 - 但我不知道它是什么!

如何让 JSON 数据退出以显示在每个单独的面板中？

提前致谢 - 我花了几个小时试图解决这个问题!

这是我得到的最接近的:

CSS:

.wrapper {
  margin: 0 auto;

  width: 100%
}

.wrapper > * {
  background-color: #fafafa;

}

.content {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
  grid-auto-rows: minmax(264px, auto);
  grid-gap: 16px;
}

.panel {
  margin-left: 5px;
  margin-right: 5px;
  height: 50px;
}



@media (max-width: 1100px) {
  .wrapper {
    grid-template-columns: 1fr;
  }

  .content {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
    grid-auto-rows: minmax(300px, auto);
  }
}

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

HTML

<div id="expand-box">
  <div class="wrapper">
    <article class="content">
      <div class="panel">
          <script id="entry-template" type="text/x-handlebars-template">
              {{#each this}}
                <div class="column">
                  <div id="est_title">{{name}} <b>{{rating}}/5</b></div>
                  <div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
                  <div id="price_subtitle">{{price_range}}</div>
                </div>
              {{/each}}
            </script>
          </div>
        </div>
      </article>
    </div>

JS AJAX

var source = $("#entry-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('.panel').html(html);

Answer 1

几个小时后才弄清楚...令人惊讶的是，SO 上没有关于此的更多详细信息。也许它会为其他人节省几个小时!

CSS

.wrapper {
  margin: 0 auto;
  width: 100%
}


#handlebars-sandbox {
  padding: 8px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
  grid-auto-rows: minmax(264px, auto);
  grid-gap: 20px;
  margin-top: 20px
}

.panel {
  margin-left: 5px;
  margin-right: 5px;
}

@media (max-width: 1100px) {
  .wrapper {
    grid-template-columns: 1fr;
  }

  #handlebars-sandbox {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
    grid-auto-rows: minmax(300px, auto);
  }
}

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

JQUERY

  var source = $('.entry-template').html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#handlebars-sandbox').html(html);

HTML

<div id="expand-box">
  <div class="wrapper">
   <div id="handlebars-sandbox"></div>
    <div class="content">
          <script id="entry-template" type="text/x-handlebars-template">
             {{#each this}}
               <div class="panel">
                <div class="column">
                  <div id="est_title">{{name}} <b>{{rating}}/5</b></div>
                  <div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
                  <div id="price_subtitle">{{price_range}}</div>
                </div>
              </div>
             {{/each}}
            </script>
        </div>
      </div>
    </div>