Javascript Girl
  1. Javascript Girl
  3. Spécifiez l'élément <tbody> d'une table HTML en tant que région dans Marionette pour Backbone.js
Intereting Posts
Permet de survoler lors de l'animation avec jQuery (sans souris mobile) Comment utiliser JSON.parse reviver parameter to parse date string JavaScript: besoin de fonctions pour convertir une chaîne contenant binaire en hexadécimal, puis converti en binaire ExtJS: traitement de l'événement de sortie du navigateur (cliquez sur la sortie croisée) 0x800a138f – Erreur d'exécution JavaScript: la valeur de la propriété '$' est nulle ou non définie, pas un objet Function Javascript regex capture plusieurs fois Passer un objet JavaScript en utilisant addJavascriptInterface () sur Android Comment puis-je manipuler le DOM sans une bibliothèque comme jQuery? Est-ce que <script> n'est pas dans <head> ok? Désactiver le formulaire d'envoi automatique sur le bouton cliquez Comment utiliser Angulate $ location pour définir mon nouvel emplacement url en modifiant dynamiquement ses params de valeur-clé? Limitation de longueur de caractères en expression régulière Obtention de la valeur d'une case SELECT dans Internet Explorer ContentEditable dans Shadow DOM? Appeler une fonction JavaScript définie dans un iframe à Chrome en utilisant le protocole de fichier

Spécifiez l'élément <tbody> d'une table HTML en tant que région dans Marionette pour Backbone.js

Problème

Utilisation d'un backbone.Marrionette.Layout pour présenter certaines données tabulaires. La partie <tbody> de la table est une Backbone.Marionette.Region qui doit afficher un backbone.Marionette.CollectionView .

Je ne peux pas comprendre comment faire cela en utilisant les "Régions" de Marionette sans déranger l'affichage de la table en insérant un élément HTML supplémentaire dans l'élément <tbody> .

Exemple de code

La Layout se présente comme suit: 

 Backbone.Marionette.Layout.extend({ template:... regions:{ list_region: '#list-region' } onRender:function(){ var collection = new TheCollection() var collectionView = new TheCollectionView({ collection: collection }) // PROBLEM: The region seems to needs its own HTML element, // and the CollectionView also seems to need its on HTML // element, but as far as I can see, there is only room // for one element: <tbody>? this.list_region.show(collectionView); });

Le modèle pour la mise en page comprend la table entière: 

 <table> <tbody id='list-region'> </tbody> <tfoot id='footer-region'> Some other stuff goes here that is not a collection, so I was able to make the View's 'tagName' property 'tr', which worked fine. </tfoot> </table>

Aucune suggestion?

L'intention de cette mise en page est-elle uniquement de faciliter une table? Si c'est le cas, vous devriez regarder à l'aide d'un CompositeView à la place. 

 RowView = Marionette.ItemView.extend({ tagName: "tr", template: ... }); TableView = Marionette.CompositeView.extend({ template: ..., childView: RowView, childViewContainer: "#list-region" });

C'est à peu près ça. Cela rendra tous vos itemsViews dans le tbody.

Marionette 3 a déconseillé la classe CompositeView . Au lieu de cela, une région peut maintenant écraser son el avec le contenu rendu de la vue intérieure avec la nouvelle option replaceElement .

Voir cet exemple pour rendre une table: 

 var RowView = Marionette.View.extend({ tagName: 'tr', template: '#row-template' }); var TableBody = Marionette.CollectionView.extend({ tagName: 'tbody', childView: RowView }); var TableView = Marionette.View.extend({ tagName: 'table', className: 'table table-hover', template: '#table', regions: { body: { el: 'tbody', replaceElement: true } }, onRender: function() { this.showChildView('body', new TableBody({ collection: this.collection })); } }); var list = new Backbone.Collection([ {id: 1, text: 'My text'}, {id: 2, text: 'Another Item'} ]); var myTable = new TableView({ collection: list }); myTable.render();