1

我一直在尝试使用 Backbone.js，但效果并不好，所以我决定从头开始，并使用 javascript 进行 OOP，我认为现在我的模板做得很好只是不会被渲染，我无法判断模板，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);

});

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

4

1 回答 1

2

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

{{#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/

于 2012-11-16T16:38:28.783 回答