带有把手的Javascript/jQuery OOP，出现未捕获错误

我一直在尝试使用Backbone.js，但效果不太好，所以我决定从头开始，用javascript实现OOP，我认为我做得很好btu现在我的模板无法呈现，我无法判断模板、js、两者或数据是否有问题

我的模板：

<script id="BudgetItemTemplate" type="text/x-handlebars-template">
{{#list data}}
 <div class="budget-item">
  <div class="item-info">{{type}}</div>
  <div class="item-spent">{{spent}}</div>
  <div class="item-budget">{{budget}}</div>
 </div>
{{/list}}   
</script>

---

我就是想不明白为什么模板不会渲染，我尝试了几种不同的方法来设置数据，目前它是一个数组中的一个数组，在我将它作为一个数组之前。同样在模板中，如果尝试将“列表”帮助器与上下文和无上下文一起使用，则这两种情况下的数据都会出现。我一直使用警报进行调试，问题似乎出在把手上，但我无法解决！如有任何意见、批评或帮助，我将不胜感激

首先，您的模板中包含以下内容：

{{#list data}}
    ...
{{/list}}

但是

{{#list}}

不是由Handlebar定义的，我也没有看到

Handlebar.registerHelper

调用任何可以添加这样一个自定义助手的地方。因此，我假设您打算使用标准内置迭代器

{{{each}}

：

<script id="BudgetItemTemplate" type="text/x-handlebars-template">
    {{#each data}}
       <div class="budget-item">
           <div class="item-info">{{type}}</div>
           <div class="item-spent">{{spent}}</div>
           <div class="item-budget">{{budget}}</div>
       </div>
    {{/each}}   
</script>​

根据您的模板，您需要使用以下数据调用已编译的模板函数：

var html = template({
    x: 'some value'
});

var html = template({
    data: [
        { type: 'pancakes', spent: 10, budget: 10 },
        { type: 'eggs',     spent:  5, budget:  1 },
        { type: 'stamps',   spent:  1, budget:  5 }
    ]
});​​​​​​​​​​​​​​

---

下面是一个正在运行的模板演示（请原谅我糟糕的色觉）：

所以我一直在阅读更多内容，我听说handlebar.js不接受实际数组作为数据，而是接受对象（因此不是[]围绕数据，{}..），所以我试着像这样编辑代码。。var数据=[]；var BudgetItems='{'+data+'}'但是如果没有效果，我应该使用数组到JSON函数吗？

var html = template({
    data: [
        { type: 'pancakes', spent: 10, budget: 10 },
        { type: 'eggs',     spent:  5, budget:  1 },
        { type: 'stamps',   spent:  1, budget:  5 }
    ]
});​​​​​​​​​​​​​​