列表渲染+模板绑定两组数据

我想实现上图这种功能，点击不同的年份按钮，在其下方显示相应内容，其他按钮下的内容自动隐藏。
我现在的思路是这样的：
Page({
data: {
riqi:[
“2015”,
“2016”,
“2017”
],
isshow:[],
},
onLoad: function () {
var that=this
var arr1=that.data.riqi
var arr2=that.data.isshow
for(var i =0;i<arr1.length;i++){
arr2[i]=false
}
that.setData({
isshow:arr2
})
},
showjl:function(e){
var id = e.currentTarget.dataset.id
console.log(id)
var that=this
var arr1=that.data.isshow
for(var i=0;i<arr1.length;i++){
arr1[i]=false
}
arr1[id]=true
that.setData({
isshow:arr1
})
console.log(that.data.isshow)
},
})
DATA中两个数组，一个riqi记录按钮的数量和显示内容，一个isshow控制按钮下的内容是否显示。

<block wx:for="{{riqi}}" wx:key="index">
<template is="temp-sj" data="{{item}}" />
</block>

<template name="temp-sj">
<button data-id="{{index}}" bindtap="showjl">{{item}}</button>
<view wx:if="{{isshow}}">
9999999999
</view>
</template>
目前我这种方法肯定是不行的data-id=”{{index}}”这个根本就没有数据，换成data-id=”{{item}}”，并修改JS文件倒是可以，但<view wx:if="{{isshow}}">也不行，<view wx:if="{{isshow[item]}}">也不行。