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

Question

我正在使用 handlebars.js 并尝试创建响应式网格结构 - 但是我不知道如何使用车把创建结构！

我不知道如何组织 div 和脚本，所以结果显示在单独的 'panels' 中！目前它们只是显示在一个长列中，彼此重叠。

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

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

如何让 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>

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

Creating a Responsive Grid Structure with Handlebars.js

html

javascript

css

handlebars.js