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);

});

我只是无法理解为什么模板不会渲染，我已经尝试了几种不同的方式来设置我的数据，目前它是一个数组的数组，在我拥有它之前就像一个数组。也是在模板中，如果尝试使用'list'帮助器同时具有上下文和没有上下文它两种情况的数据。我已经使用警报贯穿调试，问题似乎与把手有关，但我无法弄明白！我将不胜感激任何评论，批评或帮助。

Answer 1

首先，您在模板中有这个：

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

但是Handlebars没有定义{{#list}}，我没有在任何可以添加这样的自定义帮助器的地方看到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/

带有把手的Javascript / jQuery OOP，得到未捕获的错误

1 个答案: