带有 Handlebars 的 Javascript/jQuery OOP，出现 Uncaught Error

Question

我一直在尝试使用 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>

我的javascript:

var data = [];
var BudgetItems = [data];
var BudgetItemTemplateSource = $('#BudgetItemTemplate').html();
var BudgetItemTemplate = Handlebars.compile(BudgetItemTemplateSource);

function BudgetItem(type, spent, budget) {

   "use strict";
   this.type = type;
   this.spent = spent;
   this.budget = budget;

   this.editType = function (type) {
    this.type = type;
    return this;
};
this.editSpent = function (spent) {
    this.spent = spent;
    return this;
};
this.editBudget = function (budget) {
    this.budget = budget;
    return this;
};

 data.push({type: 'type', spent: 'spent', budget: 'budget'});
}

function BudgetItemList() {
this.BudgetItems = BudgetItems;
   this.render = function () {
    console.log('rendercalled')
      $('#iBudget').empty();
      $('#iBudget').append(BudgetItemTemplate(BudgetItems));
};
};

$(document).ready(function () {
var food = new BudgetItem('food', '0.00', '10.00');
var drink = new BudgetItem('drink', '10000.00', '450.00');
var bills = new BudgetItem('bills', '30.00', '50.00');
console.log(food.budget);
food.editType('basics');
console.log(food.type);
   console.log(BudgetItems);

var budgetlist = new BudgetItemList();    
budgetlist.render();
console.log(BudgetList.BudgetItems);

});

我只是不明白为什么模板无法呈现，我已经尝试了几种不同的方法来设置我的数据，目前它是一个数组的数组，在我拥有它之前作为一个数组。同样在模板中，如果尝试将“列表”助手与上下文和无上下文一起使用，这两种情况都是数据。我一直使用警报进行调试，问题似乎出在 Handlebars 上，但我无法弄清楚!我将不胜感激任何评论、批评或帮助。

Answer 1

首先，你的模板中有这个:

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

但是 {{#list}} 不是由 Handlebars 定义的，我在任何地方都看不到 Handlebars.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>​

您的“模板需要一个对象”的想法是正确的，但您的实现有点偏离。已编译的 Handlebars 模板需要一个对象用作键/值命名空间；所以如果你想在模板中引用 {{x}} 那么你需要像这样调用模板函数:

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 }
    ]
});​​​​​​​​​​​​​​

这是模板的实际演示(请原谅我糟糕透顶的色感):http://jsfiddle.net/ambiguous/BVPRb/