Question

这是完整的代码。

HTML部分：

<script id="company_template" type="text/x-handlebars-template">                            
{{#each CDataMap}}
<div>{{this}}</div>
{{/each}}
<p></p> 
</script>

JS部分

var source   = $("#company_template").html();
var template = Handlebars.compile(source);

var data= {
"CDataMap" : {
"name": "Jim Cowart",
"location": {
"city": {
    "name": "Chattanooga",
    "population": 167674
},
"state": {
    "name": "Tennessee",
    "abbreviation": "TN",
    "population": 6403000
}
},
"company": "appendTo"
}
};

$("p").append(template(data));

我想使用把手js。

使用它时只能显示对象对象。

我需要正确的代码。

Answer 1

每个车把都需要迭代元素。您要提供的数据需要修改。下面的代码工作

<script id="company_template" type="text/x-handlebarstemplate">                            

{{#each CDataMap}}

<div>Name : {{this.name}} <br/>

    Location: {{this.location.city.name}} <br />
    Population: {{this.location.city.population}}
</div>
{{/each}}

</script>
<p></p>

JS方面

var data= {
"CDataMap" : [
    {
        "name": "Jim Cowart",  
        "location": {
            "city": {
                "name": "New york",
                "population": 494949494
                }
        }
    },

  ]
};

var templateSource   = $("#company_template").html();
template = Handlebars.compile(templateSource);
studentHTML = template(data);
$("p").append(studentHTML);

Answer 2

您的示例的问题是CDataMap不是对象数组，因此您无法迭代它们。这是一个有效的例子：

<script>
    (function ($) {
        $(function () {
            var source = $("#company_template").html();
            var template = Handlebars.compile(source);

            var data = {
                "CDataMap": [{
                    "name": "Jim Cowart",
                    "location": {
                        "city": {
                            "name": "Chattanooga",
                            "population": 167674
                        },
                        "state": {
                            "name": "Tennessee",
                            "abbreviation": "TN",
                            "population": 6403000
                        }
                    },
                    "company": "appendTo"
                }]
            };

            $("p").append(template(data));
        });
    })(jQuery);
</script>

并且p标签或用于放置结果的任何元素也必须在模板之外，如下所示：

<script id="company_template" type="text/x-handlebars-template">
    {{#each CDataMap}}
        <div>{{this.name}}</div>
        <div>{{this.location.city.name}}</div>
    {{/each}}
</script>

<p></p>

如何在车把js中使用这个json

2 个答案: