JSRender 没有显示 JSON 对象的值答案

【问题标题】：JSRender is not showing the value of JSON objectJSRender 没有显示 JSON 对象的值
【发布时间】：2013-03-29 06:37:33
【问题描述】：

我在将 AJAX 响应渲染到 JSRender 模板时遇到问题。

我正在进行 $.getJSON 调用，成功后我调用了 render(data) 函数我正在使用 console.log 来确保从 $.getJSON 调用接收到的数据是正确的。

function createNewsPage(event){
                console.log("inside createNewsPage. Event Target: "+ $(event.target).text());
                $.getJSON("http://query.yahooapis.com/v1/public/yql?q=xyzhere"L,
                          {
                          cache: "true",
                          dataType: "json"
                          },
                          function(data) {insertContent(data);}
                          );
                event.stopPropagation();
                event.preventDefault();
                $("#listviewNews").collapsibleset('refresh');
                return false;
            }

            function insertContent(resp){
                console.log("---data received:\n" + JSON.stringify(resp));
                $("#insertedContent").html(
                                           $("#newsTemplate").render(resp)
                                           ).trigger('create');

            }

我没有收到任何错误，但是在呈现模板时，它会显示单词 [object] 而不是 JSON 有效负载的实际文本内容。

知道为什么会发生这种情况或如何显示 json 对象的文本（字符串）而不是仅仅说 [object]？

这是字符串化响应（普通 RSS 提要）：

{
 "query": {
  "count": 3,
  "created": "2013-03-29T16:12:49Z"
   },
  "results": {
   "item": [
    {
     "title": "BracketRacket: A quiz, a thought and Peeps"
    },
    {
     "title": "Correction: Mandatory Gun Ownership story"
    },
    {
     "title": "Clashes erupt in 2 cities in northern Egypt"
    }
   ]
  }
 }
}

【问题讨论】：

请注意，发送到 jsrenderer 的数据必须是数组，而不是 JSON 对象。你能提供字符串化的响应吗？
在问题中提供了字符串化的响应
不，它可以是一个对象。但它呈现的内容取决于您的#newsTemplate 的外观。在模板中，如果 'expression' 返回一个对象，'someObject, {{:expression}} 不会将该对象字符串化，它实际上会渲染 someObject.toString()。

标签： jsrender

【解决方案1】：

我不确定您的模板是什么样子，但这里是我如何创建模板的示例：

<script id="tmpl" type="text/html">
    <tr>
      <td>{{>title}}</td>
    </tr>  
</script>

我不会传递整个数据对象，而是传递项目：

$("#insertedContent").html($("#newsTemplate").render(data.results.item))

这是工作示例：http://jsfiddle.net/Gecew/3/

如果您需要其他字段，例如计数，请查看以下示例：http://jsfiddle.net/Gecew/4/

模板需要如下所示：

<script id="tmpl" type="text/html">
    <span>Number of items: <strong>{{>query.count}}</strong></span>
    <ul>
      {{for results.item}}
      <li>{{>title}}</li>
      {{/for}}
    </ul>  
</script>

在这种情况下，将整个数据对象传递给渲染方法：

$("#insertedContent").html($("#newsTemplate").render(data))

【讨论】：

【解决方案2】：

尝试对数据执行 console.dir() 以查看您得到的结果。

你可能需要改变

function(data) {insertContent(data);}

到

function(data) {insertContent(data.d);}

【讨论】：