2014-01-22 18 views
1

以下是完整的代碼。如何在車把中使用此json js

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。

當我使用它只是獲取對象對象顯示。

我需要正確的代碼。

+0

您使用alert或console.log來查看對象對象? –

+0

當我把這json在把手js得到對象對象display..am不使用警報或控制檯。 – user3109801

+0

發佈代碼... –

回答

0

每把手把都需要迭代元素。您提供的數據需要修改。 下面的代碼工作

<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); 
+0

您可以向我展示jsfiddle中的工作代碼becoz當我使用您的代碼時,它不顯示任何結果 – user3109801

+0

http://jsfiddle.net/BaXQf/ –

0

你的榜樣的問題是,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>