把手-内联解码上下文并填充模板

时间:2019-04-04 11:35:24

标签: javascript handlebars.js

我有一个包含JSON但已编码的json。 容器2中的数据字段是一个字符串。我想使用此数据和JSON中的其他字段填充模板。

var data = {
      "containers": [
        {
          "containerId": 1,
          "containerLabel": "1",
          "dataType": "URL",
          "data": "http://www.google1.com",
          "dataEncoding": null,
          "startDTS": "2019-04-03T10:41:04.570Z",
          "endDTS": "2025-01-01T18:29:59.999Z",
          "containerAnalyticsData": {
            "variationId": "563601179",
            "actionBlockId": "29408_563601179ActionBlock_0",
            "campaignId": 29408,
            "containerId": "1",
            "controlGroupId": "23517",
            "treatmentId": "8f3b53a9-1a7e-4fbe-b28f-450fa88ab474"
          }
        },
        {
          "containerId": 2,
          "containerLabel": "2",
          "dataType": "application/json",
                  "data": "{\"cardType\":\"123Stock\",\"cardTypeID\":5,\"cardID\":\"/content/help/en/ccx/v1/stock/width/2/stock-search\",\"cardName\":\"123 Stock\",\"displayTemplate\":\"123Stock\",\"width\":2,\"backgroundImage\":\"https://helpx.123.com/content/dam/help/en/ccx/stock/stock-june2017-2w-730x280.jpg\",\"backgroundFillColor\":\"\",\"invertPresentation\":false,\"overlayTintColor\":\"\",\"overlayTintPercentage\":0.0,\"priority\":1,\"cardLabel\":\"GET TEN FREE IMAGES FROM 123 STOCK\",\"displayText\":\"Get 10 free 123 Stock images.\",\"displayTextAlignment\":\"center\",\"bodyCopy\":\"\",\"bodyCopyAlignment\":\"left\",\"ctaLabel\":\"Go\",\"ctaAlignment\":\"right\",\"secondaryCTALabel\":\"\",\"secondaryCTAAlignment\":\"right\",\"actionURL\":\"https://stock.123.com/search?k=\",\"urlLinkType\":\"external\",\"defaultURL\":\"https://stock.123.com\",\"urlAppendAnalyticsParams\":true,\"urlApply123Authentication\":true,\"footnote\":\"\",\"searchLabel\":\"\"}",
          "dataEncoding": null,
          "startDTS": "2019-04-03T10:41:04.493Z",
          "endDTS": "2025-01-02T07:59:59.999Z",
          "containerAnalyticsData": {
            "variationId": "563597567",
            "actionBlockId": "28018_563597567ActionBlock_0",
            "campaignId": 28018,
            "containerId": "2",
            "controlGroupId": "",
            "treatmentId": "PR-91a1350b-1f86-46f4-8193-0e06fbc9412d"
          }
        }]
    };

是否可以在线内解码此数据并填充模板?

以下是提要链接,该链接具有填充模板的逻辑:http://jsfiddle.net/agoyal/38goqau5/6/

编辑:
生成的对象应具有JSON而不是字符串的内部数据元素。

我快到了。我想构建自己的对象,但是有一个小问题,我必须立即使用data.data而不是data。如何通过修改当前上下文返回整个对象?
 看到这个小提琴:jsfiddle.net/agoyal/0fwm768n/29

1 个答案:

答案 0 :(得分:0)

您可以做的是创建一个将您的字符串解析为JSON的助手。

查看此fiddle

<div>
   {{data.cardID}}
</div>


Handlebars.registerHelper('eachJson', function(context, options) {
    let returnValue = ""

  $.each(context, function() {
    if (this.dataType === "application/json") {
      const json = JSON.parse(this.data)

      returnValue += options.fn({
        //Return the whole JSON
        data: json
      });      
    } else {
        returnValue += options.fn({
                data: this.data
      })
    }
  })

    return returnValue;

})

编辑: