Backbone: Daten und Funktionen des Modells in der Ansicht verwenden

Question

Ich bin ziemlich neu in Backbone und habe mich gefragt, wie man auf Daten und Funktionen eines Modells von einer Ansicht aus zugreifen kann, die das Modell als Abhängigkeit einfügt.

Mein Modell sieht wie folgt aus:

countries.coffee

define [ 
    'underscore' 
    'backbone' 
    'parse' 
], (_, Backbone, Parse) -> 
    'use strict'; 

    class CountriesModel extends Parse.Object 

    countries: ['GB','US','FR','JP','WL','ZM','NG'] 

    returnCode = (code) -> 
     return code 

Und meiner Meinung nach sieht wie folgt aus:

country.coffee

define [ 
    'jquery' 
    'underscore' 
    'backbone' 
    'templates' 
    'models/projects' 
    'models/countries' 
], ($, _, Backbone, JST, CountriesModel, ProjectModel) -> 
    class CountryView extends Backbone.View 

    ... 

    console.log countries 

    returnCode(4) 

I bin ich Injizieren des CountriesModel als Abhängigkeit, aber wenn ich die Funktion aufrufen oder die countries log ich die folgende Fehlermeldung erhalten:

Uncaught ReferenceError: returnCode is not defined 

ich nicht herausfinden können, was mache ich falsch. Jede Hilfe wird geschätzt. Danke im Voraus!

UPDATE

ich den Code oben aktualisiert haben ein bisschen mehr Kontext.

Ich versuche, ein wiederverwendbares Modell (CountriesModel) zu erstellen, so dass ich auf dieses countries Array und die returnCode Funktion auf verschiedenen Ansichten über meine App zugreifen kann. Aber ich kann nicht herausfinden, wie man auf sie auf meinem CountryView zugreift.

Mein CountryView wird benötigt schon ein Modell ProjectModel, und ich bin in der Lage aus ProjectModel wie diese Funktionen und Arrays zu nennen:

this.model.exampleArray
this.model.exampleFunction()

Ich kann nicht herausfinden, wie ich Funktionen oder Arrays von meinem CountriesModel aufrufen.

Wer weiß, was ich falsch mache?

Answer 1

TBH Ich verstehe nicht wirklich, warum Sie Ihr Modell als Deps verwenden. Eine gute Ansicht sollte vom Modell abstrahieren und das Modell sollte an die Ansicht von der Route angehängt werden.

// this goes in your view file 
var CountryView = Backbone.view.extend({ 
    // here goes all the view logic to display the model data 
    // you can refer to your model using this.model 
}) 

... 
// in the router file 
var myModel = new CountriesModel(); 

var router = Backbone.router.extend({ 
    routes: { 
     "": home, 
     "home": home 
    }, 
    home: function(){ 
     var view = new CountryView({ model: myModel}); 
     view.render(); //if you didn't rendered the view in the initialize method 
    } 
}) 

---

Sie ein anderes Modell in der Ansicht zugreifen kann es zur Laufzeit im Router Befestigung

... 
// in the router file 
var myModel = new CountriesModel(); 
var anotherModel = new ProjectModel(); 


var router = Backbone.router.extend({ 
    routes: { 
     "": home, 
     "home": home 
    }, 
    home: function(){ 
     var view = new CountryView({ 
           model: myModel 
           anotherModel: anotherModel 
           }); 
     view.render(); //if you didn't rendered the view in the initialize method 
    } 
}) 

und in Country befestigen Sie es in der Initialisierungsfunktion

initialize: function (options){ 
    this = _.extend(options, this) 
    // or 
    // this.anotherModel = options.anotherModel 
    // this.model = options.model 
} 

Aber Sie sollten Sie nicht Modelle in einer Ansicht mischen, haben Sie einfach eine andere Ansicht für das projectModel und verwenden Sie sie beide bei Bedarf

// something like 
var countryView = new CountryView({model: myModel}); 
var projectView = new ProjectView({model: anotherModel}); 

und machen sie zusammen vom Router

Answer 2

Ihrer Ansicht Sie Modelle andere als die instanziieren kann, die bei this.model verwiesen wird. Z. B:

var SomeView = Backbone.View.extend({ 

    initialize: function() { 
     this.countriesModel = new CountriesModel(); 

     // Anywhere in your view do stuff with `this.countriesModel`. E.g: 
     // this.listenTo(this.countriesModel, ...) 
     // this.countriesModel.fetch() 
     // etc 
    } 

}); 

Answer 3

Ich denke, dass in diesem besonderen Fall wäre es sinnvoll sein, dass Sie ein Modell „countryModel“ zu schaffen und eine Rückgrat Sammlung „countriesCollection“. Aber das ist vielleicht nicht die Natur Ihrer Frage (Ihr Update zeigt an, dass Sie mit der Wiederverwendbarkeit des Modells zu kämpfen haben), deshalb werde ich das in meiner Antwort nicht berücksichtigen.
Ich weiß nicht, coffeescript, aber ich werde mit Javascript arbeiten.
Die Antwort ist in der Tat technisch Modelle über den options Parameter an die Ansicht während der Instanziierung übergeben.

Ich denke, dass es insgesamt eine gute Idee ist, Presenter-Objekte zu verwenden, um bestimmte Ansichtengruppen zu verwalten. Dieses Objekt würde Sichten instanziieren, die verwandt sind, und wie Sie es erwähnten, ermöglichen Sie, eine Instanz des countriesModel in diesen Präsentator zu injizieren.
Stellen Sie sich hypothetisch vor, dass Sie über eine Webanwendung verfügen, die eine Karte und eine Liste mit Orten darstellt, die aus irgendeinem Grund das von Ihnen beschriebene Modell erfordern. Sie könnten Code haben, der wie folgt aussieht:

var countriesModel = new CountriesModel(); 

var headerPresenter = new HeaderPresenter(); 
var mapPresenter = new MapPresenter(countriesModel); 
var listPresenter = new ListPresenter(countriesModel); 

Was passiert, ist, dass Sie das Modell nur einmal, instanziiert und die Instanz in die Moderatoren injizieren, die sie benötigen.
Im Presenter-Objekt können Sie sofort auf die Eigenschaften/Methoden zugreifen, die für das übergebene Modell festgelegt wurden.

Mit diesem Ansatz können Sie schnell feststellen, welche Präsentatoren das wiederverwendbare Modell benötigen.
Wenn Sie die Komponente auch in neuen Präsentatoren benötigen, können Sie sie problemlos weiterleiten.
Innerhalb des Präsentators können Sie dann noch auswählen, zu welchen Ansichten Sie das Modell senden möchten.

Eg. Liste Moderator:

function listPresenter(countriesModel){ 
    this.listView = new ListView({ "model": countriesModel); 
    //More views can be added with the same model instance 
}; 

Entweder aus den Ansichten oder die Moderatoren, Sie sind in der Lage, an Veranstaltungen auf dem Modell zu hören, seine Methoden ausführen und neu rendern die Ansichten.
Persönlich verwalte ich diese Logik vom Presenter, weil dies der Ort ist, an dem ich andere injizierte Dienste und Komponenten zb ausführen kann. Serveraufrufe oder spezifische Berechnungen, die für verschiedene Ansichten üblich sind. Die Handhabung dieser allgemeinen Logik für verschiedene Sichten kann leicht durch Übergeben eines Ereignisaggregators an jede der Sichten durchgeführt werden.Die Ansichten lösen benutzerdefinierte Ereignisse aus, um das Erforderliche auszuführen, und der Präsentator hört benutzerdefinierte Ereignisse ab, führt die erforderliche Logik aus und rendert Ansichten (neu).
Ich bevorzuge es, die Ansicht sauber und konzentriert auf DOM-Interaktion/DOM-Ereignisbindung zu halten.

Sidenote: Backbone Marionette bietet einen App-Level-Event-Aggregator, der Ihnen den Aufwand erspart, Event-Aggregatoren auf jede Ansicht einzeln zu übertragen.

var someView = new SomeView(); 
var region = new Marionette.Region({ el: "#some-region" }); 
region.show(someView); 

Re-Ansichten, durch Verwendung von Mario Regionen Speichersicher: durch die Verwendung Syntax wie
Es ist auch eine sehr bequeme lib Ansichten von den Vortragenden zu machen.

Hoffentlich hilft das.