テンプレート要素にアクセスしてモデルデータを取り込む方法

テンプレートを作成して、4つのhtml div要素を入れたいとします。今私のビューファイルでは、これら4つのテンプレート要素に異なるデータを設定したいと考えています。以下は私が達成しようとしているものです。テンプレート要素にアクセスしてモデルデータを取り込む方法

HTMLファイル：

<script id = "four-child-template"> 
<div id = "one> 
<div id = "two"> 
<div id = "three"> 
<div id = "four"> 
</script>

表示ファイル：ソリューションのための

var widgetdata = new widgetdata.chart({}); 

    var myChartView4 = Backbone.View.extend({ 

    render: function() 
    { 
     // I want to put four different data coming from model to the template div elements 
// need help here. how to inject different values coming from models to corresponding div tags. 
$(this.el).html(this.model.attributes.incThisYear[this.model.attributes.incThisYear.length-1]); 
    }, 
    initialize: function() 
    { 
    this.model.on('change', this.render, this); // registering on change of model 
    } 
    }); 
    new myChartView4({ 
    el: '#four-child-template', 
    model: widgetdata 
    });

ATTEMPT 1：

<body> 
    <div id="divForRender"></div> 
</body> 

<script id = "four-child-template"> 
<div id="one"><%= j.attr1 %></div> 
</script> 

// WORKING for one ttop bar 
var widgetdata = new chartmodel.chart({}); 

    var myChartView4 = Backbone.View.extend({ 
    template: _.template($('#four-child-template').html()), 
    render: function() 
    { 


     var j = {}; // can use model.toJSON() but if you only want specific attributes then just assign as needed 
     j.attr1 = "hello" ; 
      $(this.el).html(this.template(j)); 
    }, 
    initialize: function() 
    { 
    this.model.on('change', this.render, this); // registering on change of model 
    } 
    }); 

var t = new myChartView4({ 
    el: '#divForRender', 
    model: widgetdata 
    }); 
t.render();

ERROR：VM6554：6キャッチされないのReferenceErrorは：jは定義されていない

出典

2016-06-16 Unbreakable

ビューがレンダリングされると、HTMLをdivForRenderに挿入します。

<body> 
    <div id="divForRender"></div> 
</body>

予想されるタイプのJSONデータを想定してテンプレートをセットアップします。

<script id = "four-child-template"> 
<div id="one"><%= attr1 %></div> 
<div id="two"><%= attr2 %></div> 
<div id="three"><%= attr3 %></div> 
<div id="four"><%= attr4 %></div> 
</script> 

var widgetdata = new widgetdata.chart({});

ビューセットアップ

var myChartView4 = Backbone.View.extend({ 
    /* Let the template in the view point to the above defined template id. */ 
    template: _.template($('#four-child-template').html()), 
    render: function() 
    { 
     /* Grab the relevant parts of the model and create object to pass to template. */ 
     var j = {}; // can use model.toJSON() but if you only want specific attributes then just assign as needed 
     j.attr1 = this.model.get('myAttribute1'); 
     j.attr2 = this.model.get('myAttribute2'); 
     j.attr3 = this.model.get('myAttribute3'); 
     j.attr4 = this.model.get('myAttribute4'); 

     $(this.el).html(this.template(j)); 
    }, 
    initialize: function() 
    { 
     this.model.on('change', this.render, this); // registering on change of model 
    } 
}); 

var cv4 = new myChartView4({ 
    el: '#divForRender', 
    model: widgetdata 
}); 

cv4.render();

出典

2016-06-16 21:58:59 bvoleti

ちょうど 'model.toJSONを（）'を使用して、無駄なコードを取り除く... –

は、応答をありがとうございました。しかし、私はデバッガが行$（this.el）.html（this.template（j））を横切ったときに1つのエラーが発生しています。。エラー：VM6382：6 Uncaught ReferenceError：jが定義されていません。しかし、私たちはすでにjを定義して、なぜエラーが起こっているのでしょうか。親切に助けてください。 – Unbreakable

私はあなたの質問に（あなたの提案通りに）試したコードスニペットを追加しました。一度会いましょう。 – Unbreakable

テンプレート要素にアクセスしてモデルデータを取り込む方法

答えて

関連する問題