przekazywanie obiektu modelu do widoku w szkielecie

Próbowałem przekazać obiekt modelu do oceny w moim szablonie, ale nie miałem szczęścia. Próbowałem następujących ale nie miał szczęściaprzekazywanie obiektu modelu do widoku w szkielecie

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: używam szablonu podkreślenia silnik

Źródło

2013-10-26 tawheed

tylko edytować Twój szablon, aby uczynić go możliwym do buforowania, a funkcja renderowania przekazuje model.toJSON() lub model.attributes, nie przekazuj samego modelu. [BACKBONE DOCS] (http://backbonejs.org/#View-template) –

Musisz dostać propertis o Bacbone modelu ze składnią pochłaniacza, więc trzeba przepisać swój szablon:

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

Albo trzeba przekształcić swój model do zwykłego obiektu JS Dzwoniąc _.template co można zrobić z .toJSON() (który tworzy klona modelu) lub .attributes nieruchomości:

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

sidenote: należy wziąć pod uwagę, aby przenieść logiki renderowania szablonu na widoku. Ponieważ bieżący kod renderuje szablon, gdy widok jest zadeklarowany, a nie po wywołaniu metody render. Więc możesz uzyskać nieoczekiwany rezultat. Więc kodzie Ci wyglądać następująco:

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

Źródło

2013-10-26 17:41:11 nemesv

To jest niesamowite! Dzięki temu drugie podejście zadziałało jak urok – tawheed

Ponadto, na swój sposób, aby przejść do widoku modelu nie jest elastyczny, ponieważ przechodzą instancję modelu, zamiast domyślnego modelu. Tak więc, można wydzielić

this.mymodel = new myMod({}),

(btw, powyżej linii daje mi komunikat o błędzie w przeglądarce chrome powodu Znak „=”)

Następnie załóżmy, że masz przykład:

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

Następnie przekazać je do widoku jak:

myview = new dashView({mymodel: A})

jeszcze jeden krok, trzeba zrobić, to zadzwonić do renderowania funkcji :

myview.render();

Oto kompletne rozwiązanie:

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

Jeśli chcesz studiować backone.js, proszę przeczytać tę książkę otwarte źródła, które zaczynaj mi:

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

Źródło

2013-10-26 18:00:54 chfw

przekazywanie obiektu modelu do widoku w szkielecie

Odpowiedz

Powiązane problemy