2014-01-22 3 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 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> 

А также р тег или любой элемент, который вы будете использовать, чтобы поместить результат в должен быть вне шаблона, как этот:

<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> 
Смежные вопросы