将API响应数据传递给Handlebars

时间:2016-06-05 16:50:05

标签: handlebars.js zurb-foundation feathersjs

我在本地使用羽毛js客户端来访问远程羽毛服务器。我在客户端使用把手(基础6 Yeti设置)。

此代码将传递[Object,Object](原始响应) 或json字符串到控制台。

pageService.get().then(function(pages) {
     var pageList = JSON.stringify(pages.data);
     console.log(pageList);
     var pageObj = JSON.parse(pageList);
     console.log(pageObj);

如何将其作为变量转换为把手。

<h4>List Page SEO</h4>
{{ pageList }}

<div id="page-info">
    {{#each pageObj}}
    <h2>{{title}}</h2>
    <h2>{{slug}}</h2>
    <p>{{description}}</p>
    {{/each}}
</div>

1 个答案:

答案 0 :(得分:0)

可以使用Feathers client使用来自服务器的数据呈现Handlebars模板,如下所示:

<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script type="text/javascript" src="//npmcdn.com/feathers-client@^1.0.0/dist/feathers.js"></script>

<script id="pages-template" type="text/x-handlebars-template">
  <h4>List Page SEO</h4>

  <div id="page-info">
    {{#each pages}}
      <h2>{{title}}</h2>
      <h2>{{slug}}</h2>
      <p>{{description}}</p>
    {{/each}}
  </div>
</script>

<script type="text/javascript">
  var socket = io();
  var app = feathers()
    .configure(feathers.hooks())
    .configure(feathers.socketio(socket));

  var source = $("#pages-template").html();
  var template = Handlebars.compile(source);

  app.service('pages').find().then(items => {
    console.log(template({
      pages: items.data
    }))
  });
</script>