Dialogs and Views

[Chris Mcvittie]

Hi, 

I'm wondering what the best way to create a modal dialog with Chaplin is.

So far I have:

class DialogView extends Chaplin.View
  afterRender: => @el.modal 'show'

My question is how to hook up the view.  I basically have a list with an edit action that should trigger the modal.  I assume I can't have a route on the controller, because that would prevent the dialog from overlaying the existing page.

So do I just new the View up, call initialize and then render

onEdit: () =>
   view = new EditDialogView()
   view.initialize()
   view.render()

I'm guessing this misses something around view life-cycle, which is one of the reasons for using chaplin to start with...  So any advice would be greatly appreciated.

Thanks, 

Chris

 

[Mathias Schäfer]

Hi Chris,

Am 25.09.12 16:41, schrieb Chris Mcvittie:

> My question is how to hook up the view. I basically have a list with an
> edit action that should trigger the modal. I assume I can't have a
> route on the controller, because that would prevent the dialog from
> overlaying the existing page.

Right.

> So do I just new the View up, call initialize and then render
>
> onEdit: () =>
> view = new EditDialogView()
> view.initialize()
> view.render()

initialize is called automatically by the constructor, so you don’t have
to call it manually (that’s a general Backbone feature).

Apart from that, that’s fine IMO.

By the way, if you always want to render the view on creation, you might
declare autoRender: true on the view, making the render() call unnecessary.

> I'm guessing this misses something around view life-cycle, which is one
> of the reasons for using chaplin to start with... So any advice would
> be greatly appreciated.

I would treat the modal dialog like a normal sub-view. The fact that
it’s visually an overlay is just a matter of styling. Technically such a
modal is a dependent subview.

So it makes sense to officially register it as a subview by calling
@subview():

view = new EditDialogView model: someModel
view.render()
@subview 'editDialog', view

'editDialog' is just an arbitrary name. This way Chaplin knows about the
subview. The benefit is a proper disposal of the subview once the parent
view is disposed.

(Sorry, the documentation for the Chaplin.View isn’t ready yet –
http://chaplinjs.github.com/docs/view.html – feel free to ask again.)

Regards
Mathias

[Chris Mcvittie]

Thanks Mathias, that's really helpful :)