Question

好，所以我得到了一个看起来像这样的对象：

Magnetim.photos = {
 facebook:{albums: {id:["id1","id2","id3","id4"] , albumName:["n1","n2","n3","n4"]}},
}

在手柄模板内我做这行代码：

<select id="albums-selection">
  {{#each photos.facebook.albums.albumName}}
    <option id="{{photos.facebook.albums.id}}" value="{{this}}">{{this}}</option>
 {{/each}}
</select>

这会输出以下结果：

<option id="id1,id2,id3,id4" value="n1">n1</option>
<option id="id1,id2,id3,id4" value="n2">n2</option>
<option id="id1,id2,id3,id4" value="n4">n3</option>
<option id="id1,id2,id3,id4" value="n4">n4</option>

但是我想要实现的是每个名称都将id元素设置为自己的id，所以它看起来像这样：

<option id="id1" value="n1">n1</option>
<option id="id2" value="n2">n2</option>

等。

Answer 1

当您在{{#each}}语句中时，句柄会为您提供@index变量来跟踪当前项目索引。知道这一点，你应该能够从其他阵列中获得相应的项目。

首先，您需要走出{{#each}}之外，这是通过使用../来完成的，这将使您向上移动一级。

我最初的方法就是做这样的事情

{{../albumName.[@index]}}

但由于某些原因，这个问题没有成功。所以我编写了帮助程序，只需通过你传递的索引从数组中获取项目：

Handlebars.registerHelper('getAlbumName', function(array, id) {
        return array[id];
    });

现在您的车把模板将如下所示：

  <script id="template">
        <select id="albums-selection">
            {{#each id}}           
              <option id="{{this}}" value="{{getAlbumName ../albumName @index}}">
                {{getAlbumName ../albumName @index}}
              </option>
            {{/each}}
        </select>
    </script>

    <div id="output"></div>

这是js：

var Magnetim = {};
Magnetim.photos = {
    facebook: {
        albums: {
            id: ["id1", "id2", "id3", "id4"],
            albumName: ["n1", "n2", "n3", "n4"]
        }
    }
};

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

Handlebars.registerHelper('getAlbumName', function(albums, id) {
    return albums[id];
});

$("#output").html(template(Magnetim.photos.facebook.albums));

最终jsfiddle一切就绪

把手如何获取对象内的兄弟值

1 个答案: