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.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 に答える