2013-10-26 13 views
9

Ich habe versucht, ein Modellobjekt zur Auswertung in meiner Vorlage zu übergeben, hatte aber kein Glück. Ich habe versucht, die folgende hatte aber kein GlückÜbergabe des Modellobjekts zum Anzeigen im Backbone

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: Ich bin mit der Unterstrich-Vorlage Motor

+0

einfach bearbeiten Ihre Vorlage, um es cachbar zu machen und in Ihrer Renderfunktion model.toJSON() oder model.attributes zu übergeben, übergeben Sie das Modell selbst nicht. [BACKBONE DOCS] (http://backbonejs.org/#View-template) –

Antwort

3

Sie müssen propertis eines Bacbone Modells mit der Getter-Syntax erhalten, so müssen Sie Ihre Vorlage neu zu schreiben:

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

Oder Sie brauchen Ihr Modell in ein einfaches JS-Objekt zu konvertieren, wenn _.template Aufruf, was Sie tun können, mit dem .toJSON() (die einen Klon des Modells erstellt) oder .attributes Eigenschaft:

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

Sidenote: Sie sollten prüfen, um die Vorlage Rendering-Logik in Ihrer Ansicht zu bewegen. Weil Ihr aktueller Code Ihre Vorlage rendert, wenn Ihre Ansicht deklariert ist, und nicht, wenn Sie die Methode render aufrufen. Sie erhalten also möglicherweise ein unerwartetes Ergebnis. So Ihr Code Sie sehen aus wie folgt aus:

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

Das ist großartig! Dank der zweiten Annäherung funktionierte wie Charme – tawheed

5

Zusätzlich Weg, ein Modell zu einer Ansicht passieren ist nicht flexibel, weil Sie eine Instanz des Modells passieren würde, statt eines Standardmodells. So möchten Sie vielleicht

this.mymodel = new myMod({}), 

einzelne aus (btw, über der Linie gibt mir Fehlermeldung in meinem Chrome-Browser, weil der "=" Zeichen)

Dann nehme an, Sie eine Instanz A haben:

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

Dann ist es zu Ihrer Ansicht passieren, wie:

myview = new dashView({mymodel: A}) 

Ein weiterer Schritt, müssen Sie tun, ist Funktion machen nennen :

myview.render(); 

Hier ist eine komplette Lösung:

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

Wenn Sie backone.js studieren wollen, lesen Sie bitte diese offenes Buch Quelle, die mir den Einstieg:

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

Verwandte Themen