我尝试使用嵌套文档渲染对象。问题是它只显示来自r.lang.x的条目而不是r.offerHistorys.offerHistory.x,但是该行只是为空而是为了lang值。
mustache.js 2.2
Mustache.to_html(this.templates.openRequest, r, this.templates.partials);
log r(传递给模板的数据)
{
"header":{
"index":"/shiftadmin/_design/shifts/_list/index/shifts?descending=true&limit=10",
"appTitle":"Shift-Admin-Open-Requests"
},
"scripts":{
},
"lang":{
"prio":"priority",
"incentive":"incentive",
"stat":"stat",
"yourOffers":"yourOffers",
"yourReqs":"yourReqs",
"offerHistory":"offerHistory",
"pageTitle":"pageTitle"
},
"offerHistorys":[
{
"offerHistory":{
"_id":"83c6a87147479fe3408a3d951d032106",
"_rev":"11-d34b8b430e221a3dff5d73f6a1420e40",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d001aa2"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":null,
"status":"requested",
"idTarget":6,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d001aa2",
"_rev":"8-a98d5b16296cc7d325210b58303ee2eb",
"cat":"test",
"title":"2 server test",
"idUser":2,
"idQualification":16,
"idSection":1,
"type":"shift",
"start":"2016-11-20 14:00 +02:00",
"end":"2016-11-20 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
},
{
"offerHistory":{
"_id":"83c6a87147479fe3408a3d951d032457",
"_rev":"9-72942be560e22b3788afcaa5a85c2fa3",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d002c7q"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":5,
"status":"requested",
"idTarget":5,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d002c7q",
"_rev":"8-1bb6b9a995b7db3b1af5802a23dd5efc",
"cat":"test",
"title":"3 server test",
"idUser":3,
"idQualification":16,
"idSection":2,
"type":"shift",
"start":"2016-11-21 14:00 +02:00",
"end":"2016-11-21 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
}
]
}
模板/ openRequest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ pageTitle }}</title>
</head>
<body>
<div class="col-md-2 col-xs-0"></div>
<div class="col-md-8" id="historyCont">
<h1>{{lang.offerHistory}}T</h1>
<div class="tabs row">
<button class="btn bg-info active"
type="button"
onclick="showHistory('offers')">{{lang.yourOffers}}
</button>
<button class="btn bg-info"
type="button"
onclick="showHistory(reqs)">{{lang.yourReqs}}
</button>
</div>
<div id="tblOfferHist"></div>
<div id="tblReqHist"></div>
</div>
{{#offerHistorys}}
{{>offerHistory}}
{{/offerHistorys}}
</body>
</html>
模板/分音/ offerHistory.html
<div class="hand {{gHistoryStat[status].bg}} row" id="historyItem{{_id}}" onclick="togNots(this)">
<span class="glyphicon {{gHistoryStat[status].icon}} col-xs-1 historyIcon" data-toggle="tooltip" data-placement="bottom" title="{{status}}">{{reqBy}}</span>
{{#shift}}
<span class="col-xs-10 historyTxt"><b>{{title}}</b> <span class="right small">{{lang.putInAt}} {{strSent}}</span><br>
{{start}} {{end}}<br>
{{/shift}}
{{shift[0].start}}
{{shift.start}}
{{lang.priority}}: {{lang.prio}} {{prio}}<br>
{{lang.incentives}}: {{money}}<br>
{{lang.stat}}: {{status}}
</span>
</div>
答案 0 :(得分:0)
显然嵌套级别存在限制,或者我的代码中存在逻辑错误。我通过使用一个html模板并减少数据中的嵌套级别来实现它的工作
var data = {
"header":{
"index":"/shiftadmin/_design/shifts/_list/index/shifts?descending=true&limit=10",
"appTitle":"Shift-Admin-Open-Requests"
},
"scripts":{
},
"lang":{
"prio":"priority",
"incentive":"incentive",
"stat":"Status",
"yourOffers":"yourOffers",
"yourReqs":"yourReqs",
"offerHistory":"offerHistory",
"pageTitle":"pageTitle"
},
"offerHistorys":[
{
"_id":"83c6a87147479fe3408a3d951d032106",
"_rev":"11-d34b8b430e221a3dff5d73f6a1420e40",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d001aa2"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":null,
"status":"requested",
"idTarget":6,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d001aa2",
"_rev":"8-a98d5b16296cc7d325210b58303ee2eb",
"cat":"test",
"title":"2 server test",
"idUser":2,
"idQualification":16,
"idSection":1,
"type":"shift",
"start":"2016-11-20 14:00 +02:00",
"end":"2016-11-20 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
},
{
"_id":"83c6a87147479fe3408a3d951d032457",
"_rev":"9-72942be560e22b3788afcaa5a85c2fa3",
"type":"offer",
"shifts":[
"83c6a87147479fe3408a3d951d002c7q"
],
"idUser":1,
"prio":1,
"desc":"desc of offer",
"money":5,
"status":"requested",
"idTarget":5,
"created_at":"2016-11-01 00:00 +02:00",
"shift":[
{
"_id":"83c6a87147479fe3408a3d951d002c7q",
"_rev":"8-1bb6b9a995b7db3b1af5802a23dd5efc",
"cat":"test",
"title":"3 server test",
"idUser":3,
"idQualification":16,
"idSection":2,
"type":"shift",
"start":"2016-11-21 14:00 +02:00",
"end":"2016-11-21 23:00 +02:00",
"created_at":"2016-11-01 00:00 +02:00"
}
]
}
]
};
var openRequest = '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>{{ pageTitle }}</title></head><body><div class="col-md-2 col-xs-0"></div><div class="col-md-8" id="historyCont"><h1>{{lang.offerHistory}}</h1><div class="tabs row"><button class="btn bg-info active" type="button" onclick="showHistory(\'offers\')">{{lang.yourOffers}}</button> <button class="btn bg-info" type="button" onclick="showHistory(reqs)">{{lang.yourReqs}}</button></div><div id="tblOfferHist"></div><div id="tblReqHist"></div></div>{{#offerHistorys}}<div class="hand {{gHistoryStat[status].bg}} row" id="historyItem{{_id}}" onclick="togNots(this)"><span class="glyphicon {{gHistoryStat[status].icon}} col-xs-1 historyIcon" data-toggle="tooltip" data-placement="bottom" title="{{status}}">{{reqBy}}</span>{{#shift}}<span class="col-xs-10 historyTxt"><b>{{title}}</b> <span class="right small">{{lang.putInAt}} {{strSent}}</span><br>{{start}} {{end}}<br>{{/shift}}{{shift[0].start}}{{shift.start}}{{lang.prio}}: {{lang.prio}} {{prio}}<br>{{lang.incentive}}: {{money}}<br>{{lang.stat}}: {{status}}</span></div>{{/offerHistorys}}</body></html>';
$(document).ready(function () {
var html = Mustache.to_html(openRequest, data);
console.log(html)
$("#contenet").html(html)
})