CODEWITHSUNDEEP
javascriptpolymer
Jan Beneš
Jan Beneš

Reputation: 722

Few questions regarding Polymer best practices

I'm bulding my first Polymer single page app and I have few questions.

1) In many views I need to show a dialog (various confirmations etc.) and I tried to centralize the dialogs by creating a dialog in a parent. The content of the dialog is switched by iron-pages. Here is what the code in parent looks like:

<paper-dialog id="main_dialog" with-backdrop entry-animation="scale-up-animation"
              exit-animation="fade-out-animation">
    <iron-pages id="dialogpages" selected="login" attr-for-selected="name">
        <login-view name="login"></login-view>
        <registration-view name="registration"></registration-view>
        <emaildialog-view name="emaildialog"></emaildialog-view>
        <actionerror-view name="actionerror"></actionerror-view>
        <actionconfirm-view name="actionconfirm"></actionconfirm-view>
        <passreset-view name="passreset"></passreset-view>
        <emailinput-view name="emailinput"></emailinput-view>
    </iron-pages>
</paper-dialog>

And the javascript:

    showDialog: function (path, pageName, open) {
        this.$.dialogpages.selected = pageName;
        this.importHref("/views/dialog_views/" + path + pageName + "-view.html", function () {
            if (open) {
                this.$.main_dialog.toggle();
            }
        }.bind(this), null, true);

    },

However as the app grows the code is getting messy. Do you think it would be better to import paper-dialog in subviews and show them from there?

2) I am not sure what is the most effective way to pass the data between views. I have a registration-view which contains iron-pages. In iron-pages there is a step1, step2 and step3 view. In the last step I need to save the data into the database.

I was thinking I could save the data in a parent view (for example by using this.domHost.step1 = data) and process them in the last step. Or would it be better to pass the data directly from view to view or maybe to use the iron-meta tag?

3) SOLVED: Event firing vs direct function call.

I wonder if it's better to just call the function in parent element (for example by calling this.domHost.showDialog()) or if I should fire the event and catch it when needed.

I think that from a performance perspective the direct function call would be better (no event bubbling) but the code seems to be less clear and the advantage of event firing is that I don't need to pass the reference to a children deeper in a DOM tree.

EDIT: I found an answer for the 3rd question. I should have searched better.

Thanks in advance, Jan

Upvotes: 4

Views: 143

Answers (1)

akc42
akc42

Reputation: 5001

What I have tended to do is make pairs of elements. For instance I have a <file-location> element and a <file-location-dialog> element. I am using <file-location> in dom-repeat templates and so there are many copies of this element and I then locate the <file-location-dialog> is some surrounding element at the top, so there is only one of them.

These elements communication with each other via custom events, the <file-location> element dispatches a file-location-request bubbling event on itself. The <file-location-dialog> listens to this event on its domHost and sets an internal dialogs positionTarget property to event.path[0] of the event. Any data a need to use to populate the dialog comes in that event.

When the dialog closes with an affirmative action I dispatch a non bubbling event back at the positionTarget with updated data.

I do need a lock to prevent two elements opening the same dialog at the same time.

I have only tested this with Polymer 1.0, but the events pierce the shadow dom in both directions without problems - and my reading of the web components v1.0 spec seems that I might need to change event.path[0] to event.composedPath()[0] and ensure the shadow doms are "open" (recommended anyway)

By making them in pairs, I can use a similar design model for each pair, but have custom data pass between them.

Upvotes: 1

Related Questions