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>

我得到一个未捕获的TypeError：无法读取undefined的属性'image'。我已经确认对象（数据）正在填充内容。想法？

Answer 1

我猜这个问题就在这里：

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

请注意，template是已编译的模板函数，因此当模板尝试填充{category}时，它将执行template函数。但模板函数期望一些值填充模板，然后通过{category}调用，这些值不会出现，你会得到一个TypeError。打开控制台运行这两个演示，您应该看到发生了什么：

使用category: template时出错：
的 http://jsfiddle.net/ambiguous/9wEyS/

使用category: function() { return 'string' }工作：
的 http://jsfiddle.net/ambiguous/YgfZx/

Answer 2

结果是数据中需要另一个对象：

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

把手 - 无法读取未定义的属性

2 个答案: