Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manual module registration #75

Open
janbiasi opened this issue Oct 20, 2016 · 0 comments
Open

Manual module registration #75

janbiasi opened this issue Oct 20, 2016 · 0 comments

Comments

@janbiasi
Copy link

janbiasi commented Oct 20, 2016

Using Terrific version 3.0.0 and an unknown version of generator-nitro and client-side handlebars templates.

I found a "bug" (don't know whether to determine this as a bug or not) if you register a module after the application has been started. We've had the following case:

There is a module called "Tag" which can be inserted with client-side templating into a container. So the application starts on page load, but there is no "Tag" module markup inside the page, so the module doesn't get registerd (which is also logical).

Afterwards, I've inserted the markup of a single tag, which looks like this:

<span class="a-tag a-tag--action js-a-tag--action" data-t-name="Tag" data-t-decorator="action" data-emitter-id="remove">
    <span class="a-tag__label">My Tag</span>
    <img class="a-tag__action js-a-tag__action" src="/assets/img/svg/icon-remove-tag.svg" alt="Action Icon">
</span>

And my basic T.Module.Tag and T.Module.Tag.Action code looks like this (default empty module):

(function() {
    'use strict';

    T.Module.Tag = T.createModule({
        start: function(resolve) {
            resolve();
        }
    });
}());
(function($) {
    'use strict';

    T.Module.Tag.Action = T.createDecorator({
        start: function (resolve) {
            this.id         = 'tag-action';
            var self        = this;

            $(document).on('click', '.js-a-tag__action', function(ev) {
                var $tag = $(this).parent('.js-a-tag--action');
                self._events.emit('a-tag.action', self.id + '.' + $tag.data('emitter-id'), ev, $tag);
            });

            this._parent.start(resolve);
        }
    });
}(jQuery));

And now I am registering my module like this (schematically):

// ....

var markup = T.Tpl.tagaction.render({/* data source */})
var $tag = $container.append(markup);

// T.Application is globally available as `App`
var tModule = App.registerModule($tag[0], 'Tag', ['action'])
tModule.start();

There's an error in the console now, which says, that resolve is not a function, so I have to wrap the resolve call into an if to check whether the resolve is a function or not. I think if you call the start method, it will make a direct call to the defined start method inside the module, right? If this would be case, you should write it down in the docs under chapter manual registration.

Additional Content
The module is created with the registerModule method, but there is no data-t-id attribute or something similar.

Thanks for your response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant