Events Binding can't work properly. #115

Closed
crapthings opened this Issue Dec 27, 2012 · 10 comments

Comments

Projects
None yet
2 participants
@crapthings

i console.log Template and see there're not any events under Template['templateName'].events

but it's inside Template['pages/categories/add']._tmpl_data.events

i can't bind events like what i do with original Meteor template events

@crapthings

This comment has been minimized.

Show comment Hide comment
@crapthings

crapthings Dec 27, 2012

We Need Blade!!!

We Need Blade!!!

@crapthings

This comment has been minimized.

Show comment Hide comment
@crapthings

crapthings Dec 29, 2012

Cant get event binding work except inline binded.

Cant get event binding work except inline binded.

@bminer

This comment has been minimized.

Show comment Hide comment
@bminer

bminer Jan 4, 2013

Owner

I am working on this right now... will keep you posted.

Owner

bminer commented Jan 4, 2013

I am working on this right now... will keep you posted.

@bminer

This comment has been minimized.

Show comment Hide comment
@bminer

bminer Jan 4, 2013

Owner

I cannot duplicate this bug. The following works just fine for me....

Template.foobar.events = {
    "click input[type=button]": function(e) {
        console.log("Clicked button", this, arguments);
    }
  };

When I render foobar.blade and click an <input type="button"> element, the event handler above is called. Have you upgraded to the latest version of Blade? What is the problem you are experiencing?

Thanks!

Owner

bminer commented Jan 4, 2013

I cannot duplicate this bug. The following works just fine for me....

Template.foobar.events = {
    "click input[type=button]": function(e) {
        console.log("Clicked button", this, arguments);
    }
  };

When I render foobar.blade and click an <input type="button"> element, the event handler above is called. Have you upgraded to the latest version of Blade? What is the problem you are experiencing?

Thanks!

@crapthings

This comment has been minimized.

Show comment Hide comment
@crapthings

crapthings Jan 4, 2013

QQ20130104-1

@bminer

This comment has been minimized.

Show comment Hide comment
@bminer

bminer Jan 4, 2013

Owner

@crapthings - That looks okay to me. Meteor implemented a change recently where Template.xyz.events is actually a function now. Check this out for more information.

Excerpts from the Meteor docs:

Template.myTemplate.events(eventMap)
This syntax replaces the previous syntax: Template.myTemplate.events = {...}, but for now, the old syntax still works.

Does that answer your question?

Closing this issue for now.

Owner

bminer commented Jan 4, 2013

@crapthings - That looks okay to me. Meteor implemented a change recently where Template.xyz.events is actually a function now. Check this out for more information.

Excerpts from the Meteor docs:

Template.myTemplate.events(eventMap)
This syntax replaces the previous syntax: Template.myTemplate.events = {...}, but for now, the old syntax still works.

Does that answer your question?

Closing this issue for now.

@bminer bminer closed this Jan 4, 2013

@bminer

This comment has been minimized.

Show comment Hide comment
@bminer

bminer Jan 4, 2013

Owner

Also, the following is from the Meteor templating smart package...

https://github.com/meteor/meteor/blob/master/packages/templating/deftemplate.js#L75-L83

Meteor._template_decl_methods = {
    // methods store data here (event map, etc.).  initialized per template.
    _tmpl_data: null,
    // these functions must be generic (i.e. use `this`)
    events: function (eventMap) {
      var events =
            (this._tmpl_data.events = (this._tmpl_data.events || {}));
      _.extend(events, eventMap);
    },

and later on... https://github.com/meteor/meteor/blob/master/packages/templating/deftemplate.js#L158-L161

// support old Template.foo.events = {...} format
          var events =
                (tmpl.events !== Meteor._template_decl_methods.events ?
                 tmpl.events : tmplData.events);

Notice that the event function on the template basically stores the events in the Template's _tmpl_data Object. This is the "new" way of setting up event bindings in Meteor.

Owner

bminer commented Jan 4, 2013

Also, the following is from the Meteor templating smart package...

https://github.com/meteor/meteor/blob/master/packages/templating/deftemplate.js#L75-L83

Meteor._template_decl_methods = {
    // methods store data here (event map, etc.).  initialized per template.
    _tmpl_data: null,
    // these functions must be generic (i.e. use `this`)
    events: function (eventMap) {
      var events =
            (this._tmpl_data.events = (this._tmpl_data.events || {}));
      _.extend(events, eventMap);
    },

and later on... https://github.com/meteor/meteor/blob/master/packages/templating/deftemplate.js#L158-L161

// support old Template.foo.events = {...} format
          var events =
                (tmpl.events !== Meteor._template_decl_methods.events ?
                 tmpl.events : tmplData.events);

Notice that the event function on the template basically stores the events in the Template's _tmpl_data Object. This is the "new" way of setting up event bindings in Meteor.

@crapthings

This comment has been minimized.

Show comment Hide comment
@crapthings

crapthings Jan 5, 2013

i just start a new blank project to test event binding, but still can't get it to work.

i have

\views\head.blade

title blade

\views\body.blade

include test

\views\test.blade

input#test(type='button', value='Click')

\test.coffee

if Meteor.isClient
    Template.test.events
        'click #test': (event, template) ->
            console.log event

but the event doesn't triggered...

i just start a new blank project to test event binding, but still can't get it to work.

i have

\views\head.blade

title blade

\views\body.blade

include test

\views\test.blade

input#test(type='button', value='Click')

\test.coffee

if Meteor.isClient
    Template.test.events
        'click #test': (event, template) ->
            console.log event

but the event doesn't triggered...

@crapthings

This comment has been minimized.

Show comment Hide comment
@crapthings

crapthings Jan 5, 2013

QQ20130105-3

Meteorite with meteor master branch 0.5.2 currently, and blade is the lastest from mrt add.

osx with the lastest google chrome

QQ20130105-3

Meteorite with meteor master branch 0.5.2 currently, and blade is the lastest from mrt add.

osx with the lastest google chrome

@bminer

This comment has been minimized.

Show comment Hide comment
@bminer

bminer Jan 7, 2013

Owner

Delete your body.blade file. Change test.coffee to the following:

if Meteor.isClient
    Template.test.events
        'click #test': (event, template) ->
            console.log event
    document.body.appendChild(Meteor.render(Template.test) );

The reason event bindings aren't working is because of the use of body.blade, which only renders static HTML content.

Owner

bminer commented Jan 7, 2013

Delete your body.blade file. Change test.coffee to the following:

if Meteor.isClient
    Template.test.events
        'click #test': (event, template) ->
            console.log event
    document.body.appendChild(Meteor.render(Template.test) );

The reason event bindings aren't working is because of the use of body.blade, which only renders static HTML content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment