Gestion des mises en page dans l'application Web Backbone.js/SVG?

Question

Je construis une application Backbone.js qui utilise un certain nombre d'éléments SVG.

L'image ci-dessous montre la configuration de base - un nombre variable de "widgets" qui devraient remplir la plus grande partie de l'écran.

Chaque vue de widget est une vue de Backbone qui (lorsqu'elle a configuré son propre conteneur DIV avec un élément SVG: SVG) instancie des sous-vues avec des éléments SVG: G.

J'ai un 2 questions:
1) Quel serait un bon moyen de contrôler la mise en page externe?
I.e. l'utilisateur devrait être en mesure d'ajouter et de supprimer des widgets (divs) qui circulent horizontalement et cela devrait être reflété dans l'état de l'URL. (Avec chaque WidgetModel correspondant sérialisé).

2) Quelle serait une bonne façon de contrôler la disposition interne?
I.e. lorsque la fenêtre du navigateur est redimensionnée, comment les sous-vues SVG internes obtiennent leurs largeurs/hauteurs. L'approche que je pris cette avant était d'avoir un gestionnaire de .resize (fenêtre) qui pourrait connaître les tailles de widget et passer la mise en page par le modèle à tous les points de vue et subviews:

$(window).resize(function() {    
    var activeWidgets = [widgetModel1, widgetModel2 ...] 
    each activeWidgets 
     widgetModel.set({width: widgetWidth, height: widgetHeight}) 
}); 

Mais peut-être est un inutile pirater? Une autre approche serait chaque WidgetView ayant son propre gestionnaire de redimensionnement, mais je dois ensuite passer la largeur/hauteur aux sous-vues qui ont besoin de valeurs explicites?

Merci :)

Answer 1

Je ne comprends pas bien ce que vous voulez faire. Que se passe-t-il lorsque la fenêtre est redimensionnée? Est-ce que tous les widgets changent leurs dimensions? Comment?

Une autre question est: est-ce que la largeur et la hauteur appartiennent au modèle? Voulez-vous enregistrer cela avec le widget? Ou est-ce juste pour l'affichage (et vous pouvez le calculer en fonction de la taille de la fenêtre?)

Si elles ne sont que pour l'affichage, gardez-le dans les vues. Avoir un WidgetsView qui gère toutes les vues WidgetView, puis la fenêtre redimensionne calcule la disposition et dit à chaque WidgetView de se redimensionner à (largeur, hauteur). Ensuite, je suppose que chaque WidgetView sait à quel point ses vues internes devraient être grandes, donc chaque WidgetView devrait redimensionner ce qui est à l'intérieur en conséquence.