Wie gehe ich mit der Serverantwort um, wenn ich die Synchronisierungsfunktion in backbone.js überschreibe

Question

Ich habe versucht, meine backbone.js-Anwendung mit einer vorhandenen Codeigniter-API zu verbinden. Ich schaute auf das Todos-Beispiel auf GitHub und baute von dort aus auf. ich das Überschreiben der findAll-Funktion, die auf ‚lesen‘ aufgerufen wird, und ich versuche, die Seiten zu bekommen und wieder auf die Abruffunktion zurück:

findAll: function() { console.log ('Synch - finde alle');

var url = "/folio/get/8"; 
var data = ''; 

var postmethod = 'GET'; 

$.ajax({ 
    url : url, 
    type : postmethod, 
    async: false, 
    data: data, 
    success: function(response) 
    { 
        console.debug("response",response); 
     console.debug("response.pages", response["pages"]); 
     return _.values(response["pages"]); 
    } 
}); 

}

Die API so etwas wie dieses gibt - Ausgabe über die console.debug ("Antwort", Antwort):

{ 
    "id": "8", 
    "facebook_id": "123456789", 
    "title": "title", 
    "access_date": null, 
    "rating_avg": "0", 
    "pages": [ 
     { 
      "id": "6", 
      "picture1": { 
       "id": "3", 
       "tag": "1", 
       "tip": "Crazy", 
       "facebook_picture_id": "1239102391023" 
      }, 
      "picture2": "28", 
      "picture3": "29", 
      "picture4": null, 
      "picture5": null, 
      "picture6": null, 
      "caption1": "caption 1", 
      "caption2": "caption 2", 
      "sequence": "2", 
      "folio": "8", 
      "ts": "2012-04-10 15:13:23", 
      "template": "#page-template-2" 
     }, 
     { 
      "id": "5", 
      "picture1": "24", 
      "picture2": "25", 
      "picture3": "26", 
      "picture4": null, 
      "picture5": null, 
      "picture6": null, 
      "caption1": "caption 1", 
      "caption2": "caption 2", 
      "sequence": "4", 
      "folio": "8", 
      "ts": "2012-04-10 15:13:23", 
      "template": "#page-template-2" 
     } 
    ] 
} 

aber dann console.debug ("response.pages ", response [" pages "]) druckt" undefined "aus. Warum macht es das?

Vielen Dank im Voraus!

-------------------- bearbeiten ---------------------

Danke für deine Antwort. Der Tipp, dass ich nur aus dem Modell Ajax-Anrufe tätigen kann, ist sehr hilfreich. Die Sache ist, dass ich mehrere Seiten in einem Pagelist-Sammlung zu bekommen versuche:

$(function(){ 
    // Page Collection 
    // --------------- 

    var PageList = Backbone.Collection.extend({ 

    model: Page, 
    localStorage: new Store("wickes-backbone"), // this to get hold of my overwritten localstorage file - it is not actually a localStorage 

    nextOrder: function() { 
     if (!this.length) return 1; 
     return this.last().get('order') + 1; 
    }, 

    comparator: function(page) { 
     return page.get('order'); 
    } 

    }); 

    window.Pages = new PageList; 
}); 

so innerhalb der AppView intitialize Funktion I

nenne

Pages.fetch(); 

, die alle Seiten füllt und aktualisiert die Ansicht. Ich bin mir nicht sicher, wie ich das im Modell selbst machen soll.

Answer 1

Ich denke, Ihr Problem ist, wie Sie den Erfolg Funktion in dem $ Schnipsel verwenden():

$.ajax({ 
    url : url, 
    type : postmethod, 
    async: false, 
    data: data, 
    success: function(response) 
    { 
     console.debug("response",response); 
     console.debug("response.pages", response["pages"]); 
     return _.values(response["pages"]); 
    } 
}); 

Wenn Sie etwas aus der Erfolgsfunktion auf einem AJAX-Aufruf zurückkehren, es geht direkt in die Bit Bucket. Das _.values ​​() geht nirgendwohin. Was aus einem $ .ajax() - Aufruf hervorgeht, ist ein Versprechen, das ist alles. Dieses Versprechen kann .done(), .fail() etc. später daran angehängt haben, es kann auch mit .when() und für andere Zwecke verwendet werden. Es hat jedoch nichts mit der Erfolgsfunktion zu tun, die später aufgerufen wird. Das entspricht nur einer .done() - Funktion, die diesem Versprechen beigefügt ist.

Meine Vermutung ist, dass was Sie wirklich wollen, ist für AJAX zu beenden und dann manipulieren Sie die Ergebnisse und setzen Sie sie dann auf dem Modell.

Im Allgemeinen ist der Versuch, Backbone zu zwingen, synchron zu sein, nicht so, wie es verwendet werden soll. Auch wenn Sie nicht beabsichtigen, die in Backbone integrierte Synchronisierung zu verwenden und das Abrufen, Speichern usw. zu überspringen.es immer noch Platz für glücklich wie so genannt zu werden (und beachten Sie, dass das Modell nur aktualisieren, wenn es aktualisiert, so wie du eine holen taten):

var myModel = Backbone.Model.extend({ 
    goGetSomeData : function() { 
    var scope = this; 

    $.ajax(....).done(
     function (results) { 
     scope.set(results); 
     } 
    ); 
    } 
}); 

Answer 2

Versuchen Sie, diese Zugabe in Ihrer Pagelist Backbone Collection:

parse: function(response) { 
    return response.pages 
    } 

Dies macht zwei Dinge:

1. Verwendet .pages die pages Array in Ihrer Antwort zu verweisen. Von dem, was ich aus Ihrem Code ersehen kann, verwendet Backbone die Gesamtobjekt-Antwort, um die Objekte in Ihrer Sammlung zu bestimmen.
2. Tells Backbone, das Array pages zu verwenden, um die Modelle in Ihrer Sammlung zu instanziieren. Es tut dies, indem die native parse Methode überschrieben und Rückkehr, was Sie wollen (die Seiten-Array) wirklich

Dadurch sollte Ihre Seite Objekte in eine Pagelist Sammlung erhalten. Das hat bei mir in einer ähnlichen Situation funktioniert. Ich hoffe es hilft!

Answer 3

Ok, also habe ich herausgefunden, was hier eigentlich schief läuft. Wie von John Munsch in der ersten Antwort erwähnt, war die Ajax-Anfrage nicht ganz richtig. Das war eigentlich kein Problem mit dem Backbone, aber mit dem Ajax-Aufruf, den ich machte. Zunächst einmal habe ich es json zu sein, und zweitens habe ich eine Variable ‚Seiten‘ außerhalb des Ajax-Aufruf, der die Antwort erinnern kann und senden es an die Synchronisations-Funktion:

findAll: function() { 

    var url = "/folio/get/8"; 
    var pages; 
    var postmethod = 'GET'; 

    $.ajax({ 
     type: postmethod, 
     url: url, 
     async: false, 
     beforeSend: function(x) { 
      if(x && x.overrideMimeType) { 
      x.overrideMimeType("application/j-son;charset=UTF-8"); 
      } 
    }, 
    dataType: "json", 
    success: function(data){ 
     console.debug("data", data); 
     console.debug("data.pages", data.pages); 
     pages = data.pages; 

    } 
    }); 

    return pages; 

}, 

Vielen Dank an alle für Ihre Hilfe, ich habe viel aus deinen Antworten gelernt!