Question

这是我的文件夹结构：

 #radio-1:checked ~ .overlay {
      display: none;
    }

    #radio-1:checked > .radio-bump > .radio-group-2 ~ .overlay {
      display: none;
    }

我想在一个templ.js文件中编译（预编译）所有templN.hbs把手模板文件，但是当我尝试通过控制台进行操作时

.overlay {
  background: #fff;
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0.7;
}
.radio-group-2 {
  position: relative;
}
.radio-bump {
  margin-left: 20px;
}
#radio-1:checked ~ .overlay {
  display: none;
}
#radio-1:checked > .radio-bump > .radio-group-2 ~ .overlay {
  display: none;
}

编译因此错误而失败

<div class="main-container">
  <div class="shipping-container">
    <div class="radio">
      <input type="radio" id="radio" name="radio-group-1">
      <label for="radio">Testing1</label>
    </div>
    <div class="radio-1">
      <input type="radio" id="radio-1" name="radio-group-1">
      <label for="radio-1">Testing2</label>
    </div>
    <div class="radio-bump">
      <div class="radio-group-2">
        <div class="overlay"></div>
        <div class="radios">
          <input type="radio" id="radio-2" name="radio-group-2">
          <label for="radio-2">Testing3</label>
        </div>
        <div class="radios">
          <input type="radio" id="radio-3" name="radio-group-2">
          <label for="radio-3">Testing4</label>
        </div>
      </div>
    </div>
  </div>
</div>

问题是什么？

Answer 1

经过Handlebars及其预编译器的一些练习后，我发现解决方案就像我的问题一样简单。

首先，最好留在根文件夹中，因此在我的情况下留在app文件夹中。然后，要编译所有.hbs模板，只需将整个./handlebars文件夹作为输入传递给Handlebars预编译器，并指定他应该查找的模板的扩展名：

$ handlebars ./templates -f templ.js --extension "hbs"

一切都应该正常。

有关预编译器的更多选项，请参阅http://handlebarsjs.com/precompilation.html

在一个js文件中预编译所有车把模板文件时出错

1 个答案: