handlebars.js - 车把 - 无法读取未定义的属性

Question

我有一个在模式启动后执行的脚本。配置js对象的js是：

var source = $("#print-script").html();
var template = Handlebars.compile(source);
var data = {
    image:        image,
    title:        title,
    caption:      subtitle,
    category:     template 
};
$("#print-template").html(template(data));

所有变量都设置在对象声明之上并且正在工作。我的 html 内容如下：

<script id="print-script" type="text/x-handlebars-template">
<div class="print-only" id="print-template">
  <img src="{image}"/>
  <h2><span class="icon"></span>{category}</h2>
  <h3>{title}</h3>
  <p class="headline">{caption}</p>
  <div class="description">{long_description}</div>
</div>
</script>

我收到未捕获的类型错误：无法读取未定义的属性“图像”。我已经确认对象（数据）正在填充内容。想法？

Answer 1

我猜问题就在这里：

var template = Handlebars.compile(source);
var data = {
    //...
    category:     template  // <------------------- oops
};

注意那里template是编译好的模板函数，所以当模板尝试填写时{category}，它将执行该template函数。但是模板函数需要一些值来填充模板，然后通过调用它{category}，这些值将不存在，你会得到一个 TypeError。在控制台打开的情况下运行这两个演示，您应该会看到发生了什么：

1. 使用错误：http category: template:
   //jsfiddle.net/ambiguous/9wEyS/
2. 作品使用category: function() { return 'string' }：http:
   //jsfiddle.net/ambiguous/YgfZx/

Answer 2

事实证明数据中需要有另一个对象：

var data = { print:{
                  image:        featuredImage,
                  title:        title,
                  caption:      subtitle,
                  category:     template 
                }
};