Utilisation du routeur Backbone.js pour naviguer dans les vues modularisées avec require.js

Question

Je suis séparer de mon opinion et de routeur dans des fichiers séparés avec l'exigent. J'ai alors d'un main.js fichier qui instancie le routeur, et rend également par défaut de mon point de vue.

Mon routeur a afficher ('View/:id') et modifier ('Edit/:id') que les routes. Dans main.js lorsque j'instancie le routeur, je peux coder en dur routeur.naviguer('View/1', true) et la navigation fonctionne bien. Dans mon fichier de vue, quand je clique sur le lien modifier, je tiens à appeler routeur.naviguer (Voir/' + id, vrai), mais je ne suis pas sûr de savoir comment je doit faire.

J'ai eu du succès l'appel de la colonne vertébrale.l'histoire.naviguer (Voir/' + id, vrai), mais je ne pense pas que je devrais être en s'appuyant sur le mondial épine Dorsale de l'objet.

J'ai essayé de passage ({ routeur: appRouter }) de mon point de vue, de sorte que je pouvais l'utiliser.des options.routeur.naviguer(), mais qui ne fonctionnait pas pour moi.

Dans le cas où vous êtes curieux, voici un bouquet de code à partir de mon application:

Routeur:

define(['./View', './Edit'], function (View, Edit) {
    return Backbone.Router.extend({
        routes: {
            'View/:id': 'view',
            'Edit/:id': 'edit'
        },

        view: function (id) {
            var model = this.collection.get(id);
            var view = new View({ model: model });
            view.render();
        },

        edit: function (id) {
            var model = this.collection.get(id);
            var edit = new Edit({ model: model });
            edit.render();
        }
    });
});

Vue:

define(function () {
    return Backbone.View.extend({
        template: Handlebars.compile($('#template').html()),

        events: {
            'click .edit': 'edit'
        },

        render: function () {
            //Create and insert the cover letter view
            $(this.el).html(this.template(this.model.toJSON()));
            $('#View').html(this.el);

            return this;
        },

        edit: function () {
            Backbone.history.navigate('Edit/' + this.model.id, true); 
        },
    });
});

Answer 1

Si quelqu'un d'autre cherche une solution à ce problème, comme je l'ai été, je publie ce que j'ai finalement fait. Si vous utilisez le backbone.js, vous aurez une fonction initialize() en router.js . J'ai modifié ma fonction initialize() pour qu'elle ressemble à ce qui suit:

 initialize = function () {
  var app_router;
  app_router = new AppRouter();

  // Extend the View class to include a navigation method goTo
  Backbone.View.goTo = function (loc) {
    app_router.navigate(loc, true);
  };

  Backbone.history.start();
};
 

En raison de la saveur particulière de l'héritage de backbone.js, cela me permet d'appeler MyView.goTo(location); partir de n'importe lequel de mes points de vue.

Answer 2

Comme avec à peu près tout épine Dorsale question, il y a beaucoup de façons de gérer cette situation. La façon dont j'ai abordé dans mon projet actuel est de tout mettre dans un mondial de l'espace de noms personnalisé, et l'utiliser pour passer les références nécessaires:

var MyNamespace = {};

MyNamespace.init = function() {
    MyNamespace.appView = new MyAppView();
    MyNamespace.router = new MyRouter();
    // etc
}

Point de vue pourrait alors se référer à l' MyNamespace.router que nécessaire. Mais il semble que cela ne fonctionnera pas/n'est pas encouragé avec require.js, donc, ici, sont quelques-uns des autres options:

• Ne jamais appeler le routeur explicitement - au lieu de cela, le changement de l'état global de l'objet que le routeur écoute. C'est en fait la façon dont j'ai fait des choses dans mon projet en cours - voir cette réponse pour plus de détails.

• Joindre le routeur à votre affichage de niveau supérieur, souvent appelés AppView, en faire accessible à l'échelle mondiale, et d'utiliser AppView.router.navigate().

• Faire un autre module qui fournit un navigate utilitaire de fonction qui s'appelle Backbone.history.navigate() en interne. Ce n'est pas très différent de ce que vous êtes en train de faire, mais il faudrait le rendre plus modulaire et vous empêcher d'utiliser la référence mondiale de tous les temps. Cela vous permet également de modifier l'implémentation interne.

Answer 3

Vous pourriez le faire à l'ancienne avec de la fenêtre.emplacement.hash :)

window.location.hash = "Edit/1"

Voici une solution alternative si vous n'avez pas besoin explicite routes. Lorsque vous app démarre créer un objet qui s'étend de la Dorsale Événements

window.EventDispatcher = _.extend({}, Backbone.Events);

Ensuite, n'importe où dans votre application, vous pouvez écouter les événements de

EventDispatcher.bind("mymodel:edit", this.editHandler, this);

Et aussi à partir de n'importe où à l'envoi de l'événement, data ci-dessous sont tout params vous souhaitez envoyer le long de la balade

EventDispatcher.trigger("mymodel:edit", data);

Answer 4

Pour moi, la solution avec la fonction goTo a fonctionné avec un léger changement

  Backbone.View.prototype.goTo = function (loc) {
      appRouter.navigate(loc, true);
    };
 

Answer 5

Je sais que cette question est ancienne, mais je me demande pourquoi vous n'avez pas utilisé require.js pour obtenir le routeur:

 define(['./PathToRouter', ], function (router) {
    return Backbone.View.extend({
        template: Handlebars.compile($('#template').html()),

        events: {
            'click .edit': 'edit'
        },

        render: function () {
            //Create and insert the cover letter view
            $(this.el).html(this.template(this.model.toJSON()));
            $('#View').html(this.el);

            return this;
        },

        edit: function () {
            router.navigate('Edit/' + this.model.id, true);
        }
    });
});