Question

我正在使用Handlebars，我正在尝试使用帖子的userId来查找用户的用户名和图片;现在我使用userId作为正确表达式的占位符。我也尝试了几种方法从JSON文件中获取数据而不是内联，但我没有那么正确。

{{#posts}} 
<div class="post">
    <div class="avatar">
        <img src="{{userId}}">
    </div>
    <div class="post-content">
        <a href="#">{{userId}}</a>
        {{content}}
    </div>  
    <div class="post-comments">
        {{#comments}} 
        <div class="comment">
            <div class="avatar">
                <img src="{{userId}}">
            </div>
            <a href="#">{{userId}}</a>
            {{content}}
        </div>
        {{/comments}} 
        <input type="text" name="comment" placeholder="post a comment"/>
    </div>              
</div>
{{/posts}} 

var source = $("#postTemplate").html(); 
var template = Handlebars.compile(source);
var data = { 
posts: [
{
  "id": 1,
  "userId": 1,
  "content":"Love wine? Love food?",
  "comments": [
    {
      "id": 13,
      "postId": 1,
      "userId": 2,
      "content": "Would you happen to know were Capone is? "
    }
  ]
},
{
  "id": 2,
  "userId": 2,
  "content":"Day 2 of house sitting...awww my firends really do Trust me!",
  "comments": []
}
],
users: [
{
  "id": 1,
  "username": "James Bond",
  "pic": "images/profile/Sean-Connery-as-James-Bond.jpg",
},
{
  "id": 2,
  "username": "William Forrester",
  "pic": "images/profile/2001_finding_forrester_008.png",
}
]
}; 
$('.feed').append(template(data));

Answer 1

如果您将users数组转换为其键为userId的对象：

users: {
      "1": {
              "username": "James Bond",
              "pic": "http://i49.tinypic.com/28vepvr.jpg",
           },
     "2": {
            "username": "William Forrester",
            "pic": "http://i46.tinypic.com/2epim8j.jpg",
      }
}

然后你可以创建两个自定义助手，如下所示：

var data = {
  posts: [{
    "id": 1,
    "userId": 1,
    "content": "Love wine? Love food?",
    "comments": [{
      "id": 13,
      "postId": 1,
      "userId": 2,
      "content": "Would you happen to know were Capone is? "
    }]
  }, {
    "id": 2,
    "userId": 2,
    "content": "Day 2 of house sitting...awww my firends really do Trust me!",
    "comments": []
  }],
  users: {
    "1": {
      "username": "James Bond",
      "pic": "http://i49.tinypic.com/28vepvr.jpg",
    },
    "2": {
      "username": "William Forrester",
      "pic": "http://i46.tinypic.com/2epim8j.jpg",
    }
  }
}
Handlebars.registerHelper('username', function(options) {
  var userInfo = options.data.root.users[this.userId];
  return userInfo ? userInfo.username : "";
});
Handlebars.registerHelper('avatar', function(options) {
  var userInfo = options.data.root.users[this.userId];
  return userInfo ? userInfo.pic : "";
});
var source = $("#postTemplate").html();
var template = Handlebars.compile(source);
$('.feed').append(template(data));

.post{
  margin:5px;
}
.post-comments{
  padding-left:20px;
}
img {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script type="text/template" id="postTemplate">
  {{#each posts}}
  <div class="post">
    <div class="avatar">
      <img src="{{avatar}}">
    </div>
    <div class="post-content">
      <a href="#">{{username}}</a>
      {{content}}
    </div>
    <div class="post-comments">
      {{#each comments}}
      <div class="comment">
        <div class="avatar">
          <img src="{{avatar}}">
        </div>
        <a href="#">{{username}}</a>
        {{content}}
      </div>
      {{/each}}
      <input type="text" name="comment" placeholder="post a comment" />
    </div>
  </div>
  {{/each}}
</script>
<div class="feed"></div>

或者您可以保留数组并对其进行迭代，直到您在帮助程序中找到匹配为止，这是非常昂贵的：

var data = {
  posts: [{
    "id": 1,
    "userId": 1,
    "content": "Love wine? Love food?",
    "comments": [{
      "id": 13,
      "postId": 1,
      "userId": 2,
      "content": "Would you happen to know were Capone is? "
    }]
  }, {
    "id": 2,
    "userId": 2,
    "content": "Day 2 of house sitting...awww my firends really do Trust me!",
    "comments": []
  }],
  users: [{
    "id": 1,
    "username": "James Bond",
    "pic": "http://i50.tinypic.com/f0ud01.jpg",
  }, {
    "id": 2,
    "username": "William Forrester",
    "pic": "http://i49.tinypic.com/28vepvr.jpg",
  }]
};
Handlebars.registerHelper('username', function(options) {
  var id = this.userId,
    userInfo = $.grep(options.data.root.users, function(userInfo) {
      return userInfo.id == id;
    })[0];
  return userInfo ? userInfo.username : "";
});
Handlebars.registerHelper('avatar', function(options) {
  var id = this.userId,
    userInfo = $.grep(options.data.root.users, function(userInfo) {
      return userInfo.id == id;
    })[0];
  return userInfo ? userInfo.pic : "";
});
var source = $("#postTemplate").html();
var template = Handlebars.compile(source);
$('.feed').append(template(data));

.post {
  margin: 5px;
}
.post-comments {
  padding-left: 20px;
}
img {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script type="text/template" id="postTemplate">
  {{#each posts}}
  <div class="post">
    <div class="avatar">
      <img src="{{avatar}}">
    </div>
    <div class="post-content">
      <a href="#">{{username}}</a>
      {{content}}
    </div>
    <div class="post-comments">
      {{#each comments}}
      <div class="comment">
        <div class="avatar">
          <img src="{{avatar}}">
        </div>
        <a href="#">{{username}}</a>
        {{content}}
      </div>
      {{/each}}
      <input type="text" name="comment" placeholder="post a comment" />
    </div>
  </div>
  {{/each}}
</script>
<div class="feed"></div>

P.S：我的第一把手遇到了（过去几个小时我一直在阅读this）所以可能会有更好的方法

如何在Handlebar表达式中查找JSON对象

1 个答案: