Wie rende ich eine Ansicht von einer Route?

Question

Meine App enthält zwei Ansichten mit Vorlagen, Router, Modell und Sammlung.

root 
js 
    collections 
    -collection.js 
    models 
    -model.js 
    routers 
    -router.js 
    templates 
    -add_item.html 
    -list.html 
    views 
    -add_item.js 
    -list.js 
index.html 

In router.js, ich versuche zu einer untergeordneten Ansicht zu navigieren.

define([ 
    'jquery', 
    'backbone', 
    'views/item' 
], function($, Backbone, ItemView) { 
    'use strict'; 

    return Backbone.Router.extend({ 
     routes: { 
      '': 'list', 
      'list/add': 'addItem', 
      'list/edit/:id': 'editItem' 
     }, 

     addItem: function() { 
      new ItemView(); 
     } 
    }); 
}); 

Mit Blick auf den Anruf-Stack, sehe ich, dass mein Router auslöst. Die Vorlage meiner untergeordneten Ansicht wird jedoch nicht initialisiert.

item.js Code:

return Backbone.View.extend({ 
    template: _.template(itemTemplate), 

    events: { 
     'click #save': 'saveItem', 
     'click #cancel': 'cancel' 
    }, 

    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     this.$el.html(this.template); 
     return this; 
    } 
}); 

Answer 1

der Unders _.template

Unders _.template Funktion eine Vorlage Zeichenfolge als Argument (und optional ein Einstellungs-Objekt) und gibt eine neue vorkompilierte Template-Funktion, die ein Objekt als Argument annehmen kann.

template: _.template(itemTemplate), // this returns a function, which is fine here. 

Diese Linie ist in Ordnung, aber die folgende legt man die zurückgegebene Funktion als HTML-Inhalt:

this.$el.html(this.template); // a function reference as HTML?! 

Sie benötigen die vorkompilierte Template-Funktion aufrufen, die Zeichenfolge zu erhalten:

this.$el.html(this.template()); 

Backbone Ansicht Rendering

Jetzt ist das Standardstammelement der Ansicht (el) korrekt mit dem Vorlageninhalt gefüllt.

<div>The div element is the default root element, this text is the template</div> 

Aber sobald die Vorlage gerendert wird, ist nach Ansicht des Elements noch nicht in der Seite. Um es Teil der Seite zu machen, könnten Sie:

• setzen die el Ansicht manuell in ein anderes Element in dem Router

  addItem: function() { 
      var view = new ItemView(); 
      $("#content").html(view.render().el); 
  } 
  

  ich view.render() hier setzen, weil in der initialize Rendering ist nicht meine bevorzugte Muster, da es die Wiederverwendung der Ansicht einschränkt. Aber es hängt wirklich davon ab, wofür die Sichtweise ist.

• passieren ein selector string oder Element zur el Konstruktor Option der Ansicht

  new ItemView({ el: '#the-view-element-id' }); 
  

• schaffen die Ansicht mit einer hartcodierte el Eigenschaft (dies kann durch die obigen el Option außer Kraft gesetzt werden)

  Backbone.View.extend({ 
      el: '#the-view-element-id', 
      /* ... */ 
  

Standardroute

Wenn Sie auf die list Route auf Standard möchten, können Sie das routes Objekt wie folgt machen:

routes: { 
    'list/add': 'addItem', 
    'list/edit/:id': 'editItem' 
    // catch-all (default) route at the end 
    '*anything': 'list', 
}, 

Zusätzliche Informationen:

• What is the difference between $el and el?
• Underscore's _.template explanation and example