main.js

Question

让我们在Handlebars中说我们有cards-list.html部分：

{{#each data}}

<article class="card card_list-view card_list-view--regular">
<picture class="card-image">
    <img src="{{root}}/assets/img/{{this.img}}" alt="">
</picture>
<section class="card-section">
    <header>
        <h3><a href="{{this.url}}">{{this.title}}</a></h3>
    </header>
</section>
</article>

{{/each}}

数据是这样的：

{"id": "1", 
 "title": "A",
 "img": "imga.jpg",
 "url": "card-single.html"
},
{"id": "2", 
 "title": "B",
 "img": "imgb.jpg",
 "url": "card-single.html"
}

而且 - 在card-single.html - 我想简单地用以下方式呈现单张卡片：

<article class="card card_single-view">
  <h4>{{title}}</h4}
  [etc..]

如何通过href属性或其他方式将cards-list.html部分原始上下文传递给card-single.html？

谢谢！

Answer 1

使用Handlebars.registerPartial创建部分后，您可以将其包含在模板中，如下所示：

{{> cardSingle }}

此语法还接受对象参数：

{{> cardSingle objectOfThings }}

所以在你的cards-list.html中你可能有类似的东西：

{{#each data}}
    {{> cardSingle this }}
{{/each}}

您的cardSingle部分可以直接使用this的属性：

<h4>{{title}}</h4>

Answer 2

所以，基本上你需要在cards-list.html内加入部分card-single.html。为此，您需要先使用cards-list注册部分（以下示例中为Handlebars.registerPartial）。

这里的挑战是，因为你的部分是在一个单独的文件中，你需要在服务器中运行你的应用程序（以允许Cross origin）并使用jQuery get函数来访问它，然后注册部分。

我创建了一个＆＃39; main.js＆＃39;同样的文件。

main.js

$(document).ready(function() {
  var template = Handlebars.compile($("#base-template").html());
  $.get('cards-list.html').done(function(text) { //Accessing cards-list.html
    Handlebars.registerPartial('cards-list', text); //Registering the partial in the name of `cards-list`
    /* Setting the JSON data here*/
    var context = {
      "data": [
        {
          "id": "1",
          "title": "A",
          "img": "imga.jpg",
          "url": "card-single.html"
        },
        {
          "id": "2",
          "title": "B",
          "img": "imgb.jpg",
          "url": "card-single.html"
        }
      ]
    };
    $('#results').html(template(context)); //Rendering the result in the webpage
  });
});

我的＆card; single.html＆＃39;看起来像这样。

卡single.html

<html>
<head>
  <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <!-- Includes jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> <!-- Includes Handlebars.js -->
  <script src="main.js"></script> <!-- Includes main.js -->
</head>
<body>
  <div id="results">
    <script id="base-template" type="text/x-handlebars-template">
      <article class="card card_single-view">
        <h4>{{title}}</h4> <!-- This won't print anything unless in an each loop or use {{data.[0].title}} instead-->
        {{> cards-list}} <!-- Calling the partial -->
      </article>
    </script>
  </div>
</body>
</html>

最后＆＃39; cards-list.html＆＃39;由你提供。

卡-list.html

{{#each data}}
  <article class="card card_list-view card_list-view--regular">
  <picture class="card-image">
      <img src="{{root}}/assets/img/{{this.img}}" alt="">
  </picture>
  <section class="card-section">
      <header>
          <h3><a href="{{this.url}}">{{this.title}}</a></h3>
      </header>
  </section>
  </article>
{{/each}}

所有这3个文件都在同一目录中，而且我使用mac，我只需要导航到目录并运行命令python -m SimpleHTTPServer 8000来启动服务器。（对于Windows，我们可能会使用apache tomcat服务器）。

之后，只需在浏览器中使用网址http://0.0.0.0:8000/card-single.html。

访问该文件

GITHUB link。希望这会有所帮助。

把手：通过href将信息从页面传输到另一个页面

2 个答案:

main.js

卡single.html

卡-list.html