使用带外部JSON的Handlebars模板 [英] Using Handlebars templates with external JSON

问题描述

我感到非常愚蠢，但我无法弄清楚这一点。我正在尝试Handlebars.js，但我无法让它显示来自Twitter API的数据。这是我得到的：

  $。ajax（{
 url：'http://twitter.com /statuses/user_timeline/alexlande.json'，
 dataType：'jsonp'，
 success：function（tweets）{
 
 var source = $（'＃tweet-template' ）.html（）; 
 var template = Handlebars.compile（source）; 
 var context = tweets; 
 $ b $（'＃container'）。html（template（context ））; 
} 
}）; 
  

这不会在我的模板中显示任何内容，但以下代码可按预期工作：

  var source = $（'＃tweet-template'）。html（）; 
 var template = Handlebars.compile（source）; 
 var context = {tweets：[
 {text：This is an tweet}，
 {text：这又是一个}，
 {text： 而且你总是需要三个测试推文，对吧？ } 
]}; 
 
 $（'＃container'）。html（template（context））; 
  

这很简单，我不理解，对吗？

 <$ c $ 
 
 c> var context = {tweets：[
 {text：This is an tweet}，
 {text：这又是一个}，
 {text：And你总是需要三个测试推文，对吧？ } 
]}; 
 
 $（'＃container'）。html（template（context））; 
  

但是在不起作用的代码中：

  success：function（tweets）{
 
 var source = $（'＃tweet-template'）。html（）; 
 var template = Handlebars.compile（source）; 
 var context = tweets; 
 
 $（'＃container'）。html（template（context））; 
 
  

'tweets'变量不是对象，它是一个数组。

我认为这就是你做错了。试试这个：

  success：function（tweets）{
 
 var source = $（'＃tweet 。-template'）的HTML（）; 
 var template = Handlebars.compile（source）; 
 var context = tweets; 
 
 $（'＃container'）。html（template（{tweets：context}））; // wrap in Object。 
} 
  

发布您的模板可能会更有帮助。

I feel really stupid, but I can't figure this out. I'm trying out Handlebars.js, but I can't get it to display data from the Twitter API. Here's what I've got:

$.ajax({
  url : 'http://twitter.com/statuses/user_timeline/alexlande.json',
  dataType : 'jsonp',
  success : function( tweets ) {

    var source = $('#tweet-template').html();
    var template = Handlebars.compile(source);
    var context = tweets;

    $('#container').html(template(context));
  }
});

That doesn't display anything in my template, but the following code works as expected:

var source = $('#tweet-template').html();
var template = Handlebars.compile(source);
var context = { tweets : [
  { text : "This is a test tweet" },
  { text : "And this is yet another" },
  { text : "And you always need three test tweets, right?" }
]};

$('#container').html(template(context));

This is something simple that I'm not understanding, right?

解决方案

Here you are passing an Object to the template function.

var context = { tweets : [
  { text : "This is a test tweet" },
  { text : "And this is yet another" },
  { text : "And you always need three test tweets, right?" }
]};

$('#container').html(template(context));

But in the code that doesn't work:

 success : function( tweets ) {

    var source = $('#tweet-template').html();
    var template = Handlebars.compile(source);
    var context = tweets;

    $('#container').html(template(context));
  }

That 'tweets' variable is not an Object, its an Array.

I think that is what you are doing wrong. Try this:

 success : function( tweets ) {

    var source = $('#tweet-template').html();
    var template = Handlebars.compile(source);
    var context = tweets;

    $('#container').html(template({tweets:context}));//wrap in an Object.
  }

Posting your template could help more as well.

这篇关于使用带外部JSON的Handlebars模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！