モデルオブジェクトをバックボーンに渡します

私はテンプレート内で評価するモデルオブジェクトを渡そうとしていましたが、運がありませんでした。私が試した次が、運がなかったモデルオブジェクトをバックボーンに渡します

dashboardmodel.js

var myMod = Backbone.Model.extend({ 
    defaults: { 
    name: "mo", 
    age: "10" 
    } 
});

myview.js

  var dashView = Backbone.View.extend({ 

     el: '.content-area', 

     this.mymodel = new myMod({}), 

     template: _.template(dashBoardTemplate, this.mymodel), 
     initialize: function() { 
        }, 

        render: function() { 
         this.$el.html(this.template); 
         return this; 
        } 

// more javascript code.............

dahboard.html

<p> Hello <%= name %> </p>

PS：私はアンダースコアテンプレートを使用していますエンジン

出典

2013-10-26 tawheed

をちょうど編集をあなたのテンプレートをキャッシュ可能にし、レンダリング関数でmodel.toJSON（）またはmodel.attributesを渡し、モデル自体を渡さないでください。 [バックボーン・ドックス]（http://backbonejs.org/#View-template） –

<p> Hello <%= obj.get('name') %> </p>

それとも、あなたが何ができるか_.templateを呼び出すときに、プレーンJSオブジェクトにあなたのモデルを変換する必要があります：あなたは、あなたがあなたのテンプレートを書き直す必要があるので、ゲッター構文でBacboneモデルのpropertisを取得する必要があります（モデルのクローンを作成します）.toJSON()または.attributes特性を有する：

template: _.template(dashBoardTemplate, this.mymodel.toJSON())

ミニノート：あなたはあなたのビューにテンプレートのレンダリングロジックを移動するために検討すべきです。現在のコードでは、ビューが宣言されたときにテンプレートをレンダリングし、renderメソッドを呼び出すときにはテンプレートをレンダリングしないためです。だから予期せぬ結果を得ることができます。ですから、次のようになり、コード：あなたの代わりにデフォルトのモデルで、モデルのインスタンスを渡すので、また

template: _.template(dashBoardTemplate), //only compile the template 
render: function() { 
    this.$el.html(this.template(this.mymodel.toJSON())); 
    return this; 
}

出典

2013-10-26 17:41:11 nemesv

これは素晴らしいです！魅力のように働く2番目のアプローチに感謝 – tawheed

は、ビューにモデルを渡すためにあなたの方法は、柔軟ではありません。したがって、あなたは

this.mymodel = new myMod({}),

を選び出すする場合があります（ところで、線の上に私のために「=」記号の私のChromeブラウザでのエラーメッセージを表示します）

その後、あなたはインスタンスAを持っているとします

A = new myMod({"name": "World", "age":100})

として次に、あなたのビューに渡す：

myview = new dashView({mymodel: A})

もう一つのステップは、あなたがしなければならない機能をレンダリング呼び出すことです：

myview.render();

ここに完全なソリューションです：

<html> 
<script src="jquery-1.10.2.min.js"></script> 
<script src="underscore-min.js"></script> 
<script src="backbone.js"></script> 
<body> 
<script type="text/template" id="dashBoardTemplate"> 
<p> Hello <%= name %> </p> 
</script> 
<div class="content-area"> 
</div> 
<script type="text/javascript"> 
var myMod = Backbone.Model.extend({ 
    defaults: { 
    name: "mo", 
    age: "10" 
    } 
}); 

var dashView = Backbone.View.extend({ 
    el: '.content-area', 
    template: _.template($("#dashBoardTemplate").html()), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 
mymod = new myMod({"name": "World", "age":100}); 
myview = new dashView({model:mymod}); 
myview.render(); 
</script> 
</body> 
</html>

あなたがbackone.jsを勉強したい場合は、私が始めるこのオープンソースの本をお読みください：

http://addyosmani.github.io/backbone-fundamentals/

出典

2013-10-26 18:00:54 chfw

モデルオブジェクトをバックボーンに渡します

答えて

関連する問題