Backbone JS - Ansicht nicht rendern

Ich versuche, eine einfache HTML-Seite zu erhalten, um die abgerufenen Sammlungsdaten auf der HTML-Seite anzuzeigen. Es werden keine Fehler geworfen, so dass ich nicht sagen kann, was ich falsch mache.Backbone JS - Ansicht nicht rendern

Das Modell, die Sammlung und die Ansicht werden ordnungsgemäß erstellt, da ich sie in der Konsole mit den Daten anzeigen kann, die von der API abgerufen werden. Die Seite zeigt jedoch nichts auf der Seite an. Jede Hilfe würde sehr geschätzt werden.

Modell

Department = Backbone.Model.extend({ 
    idAttribute: "dept_id", 
    urlRoot: appRouteUrl + '/api/v1/departments', 
    defaults: { 
    dept_code: '', 
    dept_desc: '' 
    } 
});

Sammlung

DepartmentCollection = Backbone.Collection.extend({ 
    url: appRouteUrl + '/api/v1/departments', 
    model: Department 
});

Ansicht

var DepartmentListView = Backbone.View.extend({ 
    template: "#department-list-template", 
    tagName: "ul", 
    render: function() { 
    var results = []; 
    var compiledTemplate = _.template(this.template); 
    this.collection.each(function(department) { 
     console.log(department); 
     var html = compiledTemplate(department.toJSON()); 
     results.push(html); 
    }); 
    this.$el.html(results); 
    return this; 
    } 
});

Inde x

<!DOCTYPE html> 
<html> 

<head> 
    <title>AppName</title> 
</head> 

<body> 
    <div class="departments"> 
    <script type="text/template" id="department-list-template"> 
     <span><%= dept_desc %></span> 
    </script> 
    </div> 
    <script> 
    var departments = new DepartmentCollection(); 
    departments.fetch(); 

    var departmentList = new DepartmentListView({ 
     collection: departments 
    }); 

    $('.departments').html(departmentList.render().$el); 
    departmentList.render(); 
    </script> 
</body> 

</html>

Quelle

2016-06-30 merty41

Da Sie keine Artikel Ansicht haben, denke ich, ist es am besten auf die Sammlung Ansicht der Vorlage iterieren. Stellen Sie sicher, dass Sie die Ansichtsinstanz erstellen/aufrufen, nachdem die Methode zum Abrufen der Sammlungen erfolgreich ausgeführt wurde.

Sie sollten Ihre Vorlage auch nicht in ein Element einfügen, das entfernt werden kann.

Department = Backbone.Model.extend({ 
 
    idAttribute: "dept_id", 
 
    defaults: { 
 
    dept_code: '', 
 
    dept_desc: '' 
 
    } 
 
}); 
 

 
DepartmentCollection = Backbone.Collection.extend({ 
 
    model: Department 
 
}); 
 

 
var DepartmentListView = Backbone.View.extend({ 
 
    template: _.template($('#department-list-template').html()), 
 
    tagName: "ul", 
 
    render: function() { 
 
    this.$el.html(this.template({ 
 
     departments: this.collection.toJSON() 
 
    })); 
 
    return this; 
 
    } 
 
}); 
 
var departments = new DepartmentCollection([{ 
 
    dept_id: 1, 
 
    dept_code: 'test1', 
 
    dept_desc: 'test1' 
 
}, { 
 
    dept_id: 2, 
 
    dept_code: 'test2', 
 
    dept_desc: 'test2' 
 
}]); 
 

 
/* 
 
departments.fetch({ 
 
    success: function(){ 
 
    // render the view here 
 
    } 
 
}); 
 
*/ 
 

 
var departmentList = new DepartmentListView({ 
 
    collection: departments 
 
}); 
 

 
$('.departments').html(departmentList.render().$el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 
<div class="departments"></div> 
 
<script type="text/template" id="department-list-template"> 
 
    <% _.each(departments,function(deparment){ %> 
 
    <li><span><%= deparment.dept_desc %></span></li> 
 
    <% }); %> 
 
</script>

Quelle

2016-06-30 17:01:21

Vielen Dank für die Hilfe, aber das gibt auch nichts zurück, keine Fehler, aber auch nichts auf dem Bildschirm. Ich denke, ich werde versuchen, dies mit einer anderen Technik anzugreifen. – merty41

Sie rufen das machen, bevor der Ajax-Aufruf beendet ist. Verwenden Sie nur deferred und rufen Sie render, wenn Fetch beendet ist.

Versuchen Sie, html diese Weise

<!DOCTYPE html> 
<html> 
<head> 
    <title>AppName</title> 

</head> 
<body> 
<script type="text/template" id="department-list-template"> 
    <li><%= dept_desc %></li> 
</script> 


<div class="departments"> 

</div> 
<script type="text/javascript"> 

    var departments = new DepartmentCollection(); 

    var departmentList = new DepartmentListView({ 
    collection: departments 
    }); 
    $.when(departments.fetch()).then(function() { 
    $('.departments').html(departmentList.render().$el); 
    }); 

</script> 
</body> 
</html>

und die Aussicht

var DepartmentListView = Backbone.View.extend({ 
     template: _.template($('#department-list-template').html()), 
     tagName: "ul", 


     render: function() { 
      var results = []; 

      var self = this; 
      this.collection.each(function (department) { 
       console.log(department); 
       var html = self.template(department.toJSON()); 
       results.push(html); 
      }); 

      this.$el.html(results); 

      return this; 
     } 

    });

Quelle

2016-06-30 14:52:02

Wenn ich die oben tun, erhalte ich die folgende auf der Seite angezeigt; # department-list-template # department-list-template – merty41

versuchen Sie es mit diesem $ ('. departments') .html (departmentList.render(). el); –

Immer noch das gleiche Ergebnis. – merty41

Die Unter Template-Funktion übernimmt eine HTML-Zeichenfolge, aber Sie geben ihm einen ID-String. Versuchen

var DepartmentListView = Backbone.View.extend({ 
    template: _.template($('#department-list-template').html()), 


    tagName: "ul", 

    render: function(){ 
    var results = []; 

    this.collection.each(function(department){ 
    var html = this.template(department.toJSON()); 
    results.push(html); 
    }); 

    this.$el.html(results); 

    return this; 
    } 

});

EDIT: den richtigen Kontext mit

render: function(){ 
    var results = []; 
    var self = this; 
    this.collection.each(function(department){ 
    var html = self.template(department.toJSON()); 
    results.push(html); 
    }); 

    this.$el.html(results); 

    return this; 
    }

Quelle

2016-06-30 15:09:35

Ich versuchte den Vorschlag oben, aber das wirft dept_list_view.js: 11 Uncaught TypeError: this.template ist keine Funktion – merty41

Ja, ich realisiere jetzt, weil in 'jeder' der Kontext nicht mehr die Ansicht ist. Versuchen Sie meine Bearbeitung –

Immer noch einen Fehler erhalten; dept_list_view.js: 11 Uncaught TypeError: self.template ist keine Funktion – merty41

Backbone JS - Ansicht nicht rendern

Antwort

Verwandte Themen