J'ai une vue de la disposition avec une région, dans cette région, j'ai une vue d'article qui déclenche un événement mais qu'il ne semble pas être bougé jusqu'à la vue de la mise en page. Est-ce que je fais quelque chose de mal ou est-ce que ce comportement conçu? Je suppose que le préfixe ItemView n'est pas ajouté car la vue parent n'est pas une vue de collection? Dans les deux cas, l'événement n'est jamais bouillonné à la vue de la mise en page.
layoutView = Marionette.Layout.extend({
template: "#layout-template",
regions: {
titleRegion: "#job-title-region"
},
triggers: {
"save:clicked" : "onSaveClicked"
},
onSaveClicked: function (args) {
alert('Clicked');
}
});
childview = Marionette.ItemView.extend({
template: "#child-template",
triggers: {
"click .js-save": "save:clicked"
}
});
5 Réponses :
Pourquoi ne pas simplement autoriser l'événement de clic pour buller la hiérarchie DOM et le gérer dans votre vue de mise en page? Quelque chose comme ça (violon ici ):
Cela ne semble pas fonctionner si je soulevais l'événement d'une vue dans la région des mises en page?
Désolé, c'était un peu une supposition vraiment. L'événement de clic doit de toute façon la hiérarchie Dom de votre mode de mise en page afin de pouvoir l'attraper dans votre mise en page à l'aide de l'objet d'événements habituels.
Bien sûr, voir cette JSFIDDLE.net/7ATMZ/11 J'ai réussi à obtenir la vue de la mise en page pour écouter L'événement enfant, mais je dois le méfier à l'extérieur de la vue de la mise en page elle-même et de casser l'encapsulation.
Vous devez avoir une vérification stricte de type MIME avec les ressources JS externes en Chrome, essayez-la ou désactivez-la :)
Mise à jour de ma réponse. Je pense que vous pouvez simplement laisser l'événement de clic bubble la hiérarchie DOM à votre vue de mise en page et la gérer là-bas.
Les déclencheurs ne fonctionnent pas comme ça: votre mise en page vous utilise mal. Les déclencheurs sont une commodité pour élever un signal d'événement donnée une certaine interaction (par exemple, un clic).
Ce que vous voulez, c'est utiliser triggermethod (Https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.function.md#marionetTetriggerMethod ) Pour déclencher une fonction dans votre mise en page. Voir http://jsfiddle.net/zxea5/ Fondamentalement, vous le souhaitez dans votre et dans votre mise en page: Bougeur d'événement ne se produit que automatiquement avec la collection? Vues composites parce qu'ils sont bien associés avec leurs vues d'article. Si vous voulez une mise en page de surveiller l'une de ses vues de son enfant, vous devez définir cela seul. Bouchon scrable: Si vous voulez en savoir plus sur la structure et la nettoyage de votre code avec Marionette , vous pouvez consulter mon livre ( https://leanpub.com/marionette-gente-introduction ) où ce type de Concept (et ses applications) est expliqué plus en détail. Afficher Fonction: < / p>
À mon humble avis, il est plus intuitif si une mise en page traiterait automatiquement tous les événements barbillants de ses enfants. Sinon, je voudrais sauf une erreur d'exception ou au moins un avertissement qu'un événement n'a pas été traité du tout. Aucun de ceux-ci n'a lieu avec la dernière version de Marionette
J'ai mis en œuvre une solution pour un problème similaire comme suit. Premièrement, j'ai écrit une nouvelle méthode dans la marionette.View prototype: qui appellera le Ensuite, vous aurez besoin d'une vue spécialisée et d'événements à bulles destinés à être bouillonnant. Vous devez faire attention à ne pas envoyer d'événements tels que triggermethod code> de marionette à deux reprises: une fois avec votre nom d'événement tel qu'il Est destiné à être manipulé et une seconde qui est facilement reconnaissable par des vues spécialisées, désignées à des événements de bulles en hausse. P> Fermer CODE> (ou des événements de marionnette du tout) au nom d'autres points de vue, car cela entraînera toutes sortes de comportements imprévisibles dans les régions et les vues. Le suffixe code>: bulle code> vous permet de reconnaître facilement ce qui est destiné à bulles. La vue de bouillonnement pourrait ressembler à ceci: P> var MyView = Marionette.ItemView.extend({
events: {
'click': 'clickHandler'
},
clickHandler: function (ev) {
// do some stuff, then bubble something else
this.bubbleMethod('stuff:done')
}
})
var BubblingLayout = Marionette.Layout.extend({
regions: {
sidebar: '#sidebar'
},
initialize: function () {
this.sidebar.on('show', this.handleBubbles, this)
},
onRender: function () {
var view = new MyView()
this.sidebar.show(view)
},
handleBubbles: function (view) {
var bubble = /:bubble$/
this.listenTo(view, 'all', function () {
var args = _.toArray(arguments)
var event = args.shift()
if (event.match(bubble)) {
event = event.replace(bubble, '')
this.bubbleMethod.apply(this, [ event ].concat(args))
}
}, this)
}
})
Je recommande d'utiliser Backbone.courier pour ce type de besoin: https://github.com/rotundasoftware/ Backbone.courier
Aller au-delà de cet exemple, vous recommanderiez-vous d'utiliser Courier sur ce qui est déjà mis en œuvre à Marionette pour des événements de bulles d'ItemViews à leur société mère Collectionview?
Je ne suis pas sûr lorsque cette fonctionnalité de Marionette a été introduite, mais une solution beaucoup plus simple utiliserait les enfants code> hachage: http://marionettejs.com/docs/v2.4.1/marionette.layoutview.html#LayOutview-childevents layout.on('childview:save:clicked', function(childView) {
alert('clicked');
}
Essayé et n'a pas fonctionné. Cela a-t-il fonctionné pour vous? J'ai dû expliquer explicitement la mise en page de listento son enfant. Par exemple: this.listento (cette.AnnonceRengion.Currentview, "Poisonpill", () => {ceci.Announgionregion.empty ()});
Non, ça marche pour moi très bien, j'ai essayé ceci pour CollectionView, LayOutView et Compositeview.
C'est un grand, à jour, solution!