Question

我正在使用handlebars.js并尝试创建一个响应式网格结构-但是，我无法搞清楚如何使用把手创建结构！

我无法弄清楚如何组织div和脚本，因此结果显示在单独的“面板”中！目前，它们只是显示在彼此上方的一长列中。

我可以使其与普通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创建响应式网格结构

1 个答案: