2016-06-03 13 views
1

Hilfe für Backbone benötigt:Backbone-Klasseneigenschaften? 'this.property' wird nicht in den Methoden funktionieren?

var Vehicles = Backbone.Model.extend({}, { 
    name: 'Sabre', 
    summary: function() { 
     console.log(this.name +" is a dog!"); 
    } 
}); 

Vehicles.summary(); 

Dies gibt: "ist ein Hund"

Zwei Fragen:

  1. Warum es nicht aus dem Namen drucken? Warum funktioniert this.name nicht?

  2. Auf der folgenden Zeile, was ist der Unterschied zwischen firstBlock und secondBlock?

    Backbone.Model.extend({firstBlock},{SecondBlock}); 
    

Antwort

2

Vom annotated source: var extend = function(protoProps, staticProps[..]

was ein wenig verwirrend Lesen Sie die Dokumentation sein könnte: http://backbonejs.org/#Model-extend

Backbone.Model.extend (Eigenschaften, [classProperties])

Aber es bedeutet, den gleichen :)

Den Grund ist der Ausgang ‚ist ein Hund‘ ist, weil name und summary sind statische Eigenschaften des Vehicles Modells. this funktioniert nicht in der statischen summary-Methode, da es sich nicht um eine Instanz handelt, auf die Sie verweisen. Sie können auf diese Eigenschaften zugreifen, ohne eine Instanz zu erstellen.

dies würde So arbeiten:

var Vehicles = Backbone.Model.extend({}, { 
    foo: 'Sabre', 
    staticMethod: function() { 
     console.log(Vehicles.foo + " is a dog!"); 
    } 
}); 

Vehicles.staticMethod(); 

Das erste Argument in der verlängern sind die protoProps wie in der kommentierten Quelle gesehen. Also, wenn Sie diese Eigenschaften verwenden möchten, müssen Sie eine neue Instanz erstellen:

var Vehicles = Backbone.Model.extend({ 
    name: 'Sabre', 
    summary: function() { 
     console.log(this.name + ' is a dog'); 
    } 
}); 

var v = new Vehicles(); 
v.summary(); 

Und natürlich können Sie kombinieren die beiden:

var Vehicles = Backbone.Model.extend(
    { 
     name: 'Sabre', 
     summary: function() { 
      console.log(Vehicles.bar + ' is a static property'); 
      console.log(this.name + ' is NOT a static property'); 
     } 
    }, 
    { 
     bar: 'foo', 
     staticMethod: function() { 
      console.log(Vehicles.bar + ' is a static property'); 
     } 
    } 
); 


var v = new Vehicles(); 
v.summary(); 

Vehicles.staticMethod(); 
+1

Das Problem ist, dass die Wahl von 'bar' als Name der statischen Eigenschaft das Problem in ** (1) ** verbirgt. Versuchen Sie es erneut mit 'name: 'foo'' anstelle von' bar: 'foo'' in Ihrem" kombinierten "Beispiel und Sie werden das ursprüngliche Problem sehen. –

4

Wenn Sie bei this in Ihrem summary statisch aussehen Methode:

summary: function() { 
    console.log(this); 
} 

Sie etwas sehen werden:

function(){return r.apply(this,arguments)} 

so ist this in der Tat die Konstruktorfunktion, die Sie erwarten würden. Das bedeutet, dass this nicht das Problem ist. Wenn Sie M = Backbone.Model.extend(...) sagen, erhalten Sie eine Konstruktorfunktion zurück in M.Aber haben JavaScript-Funktionen nicht-beschreibbaren name properties:

Function.name

Die function.name Eigenschaft gibt den Namen der Funktion.

Also das Problem ist, dass Sie versuchen, name als statische Eigenschaft zu verwenden, aber diese Eigenschaft Name bereits vergeben ist, und man kann es nicht überschreiben.

Wenn Sie eine andere Eigenschaft Name:

var Vehicles = Backbone.Model.extend({}, { 
    pancakes: 'Sabre', 
    summary: function() { 
     console.log(this.pancakes + " is a dog!"); 
    } 
}); 

dann werden die Dinge verhalten sich wie erwartet, da Funktionen (in der Regel) nicht nicht-beschreibbaren pancakes Eigenschaften aufweisen.

Demo: https://jsfiddle.net/ambiguous/qk78edkp/

Was Ihre erste Frage geht, es funktioniert, aber die Konstruktor-Funktion, dass Backbone.Model.extend geben Sie keinen Namen haben.

Pimmol's answer deckt die zweite Frage gut genug, so werde ich das allein lassen.

+0

Wow, nette. Das hätte ich nie herausgefunden. – Pimmol

+0

@ Pimmol: Das ist ein heimtückisches Problem. Ähnlich den seltsamen Dingen, die passieren können, wenn man "var self = this" vergisst und sich dann fragt, warum "self" ein [window object] ist (https://developer.mozilla.org/en-US/docs/Web/API/Fenster/selbst). –