小胡子不会在行中渲染任何嵌套对象

时间:2016-11-22 01:31:19

标签: multidimensional-array nested mustache

我尝试使用嵌套文档渲染对象。问题是它只显示来自r.lang.x的条目而不是r.offerHistorys.offerHistory.x,但是该行只是为空而是为了lang值。

http://jsfiddle.net/Hy6yn/83/

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>

1 个答案:

答案 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)
})