Clicking element doesn't fire click event

CanJS
1

Hi I’m new to canjs, I have tried the examples in the chat guide in JsBin and they work fine. The problem comes when I try to run them in my own development environment.

I’ve tried many ways:

  • Using webpack with es6, stage-2 presets enabled, and requiring the template with raw-loader.

  • Using webpack without presets but requiring the template with raw-loader

  • Using webpack without presets but the template as a string pasted inside the js file.

    var DefineMap = require(‘can-define/map/map’);
    var stache = require(‘can-stache’);

    var AppVM = DefineMap.extend({
    message: {
    type: ‘string’,
    value: ‘Chat Home’,
    serialize: false
    },
    addExcitement: function(){
    this.message = this.message + ‘!’;
    }
    });

    var appVM = new AppVM();

    template = stache(require(‘…/src/canjs/template.hbs’));
    var frag = template(appVM);

    document.body.appendChild(frag);
    appVM.addExcitement(); //this works
    document.getElementById(‘click-this’).click(); //this doesn’t, neither clicking the element in the browser.

template.hbs

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <h1 id="click-this" class="page-header text-center" ($click)="addExcitement()" >
        {{message}}
      </h1>
    </div>
  </div>
</div>

It works fine in jsBin:

This is almost the same code.

2

Just to clarify, the webpack example doesn’t call addExcitement() when you click the h1?

We’ll check it out today hopefully.

3

What browser are you using and version of webpack?

4

Hi @DrecDroid, I’m sorry it’s not working for you, but we should be able to sort it out.

Which version of webpack are you using? Any chance your setup is in a GitHub repo that I could check out?

5

Webpack version is 1.14.0.
Browser : Chrome 55.0.2883.87 m.

I can call the ViewModel method and the {{message}} is modified in the view. But when I click the h1 the click method is not called.

appVM.addExciment() works fine, the view updates with the new message value. The problem is with the click event that doesn’t call the addExciment method.

6

@DrecDroid, your code looks good; I was able to duplicate the issue in a (simplified) example app: https://github.com/chasenlehara/canjs-webpack-example/tree/forum-post-509

It looks like the global version of can used in the JS Bin is working correctly, but using the can-* modules isn’t, so we’re working through that bug right now. I’m hoping to have another update for you soon.

7

The issue is that the binding syntax ($click) is part of the can-stache-bindings module, so you’ll need to install it and require it for the click to work correctly.

Install: npm install can-stache-bindings --save

Then in your JS file:

require("can-stache-bindings");

I’ve updated my example to show it working: https://github.com/chasenlehara/canjs-webpack-example/blob/forum-post-509/main.js

8

Oh, thanks, was not clear in the guide. But isn’t supposed that ‘can-stache-bindings’ be internal to ‘can-stache’?.

9

even for me, that seems unclear.
i supposed, as DrecDroid, that if i include can-stache that all live-binding stuff will also included.

for me it makes no sense that if you are using stache you dont want using live two- or one-way-binding or clickevents.

for me, can-stache-bindings should be included in can-stache by default.
it is totally ok, that ´can-stache-bindings` is a own module!

10

they are distinct by design. It allows us to support different binding syntaxes as requested when the new binding syntaxes were created.

can-stache simply provides live binding. Any other types of bindings are added to it.

11

At least when using live bindings without importing can-stache-bindings It could throw an informative warning in development mode. Or possibly could be imported dynamically calling for example stache.useLiveBindings() before any stache() call that uses live bindings.

1 Like
12

A warning about strange attributes would be great. We do the same thing for tags. Please create an issue in can-stache

13

But can-stache is not fully decoupled from can-stache-bindings
See https://github.com/canjs/steal-stache/blob/master/steal-stache.js#L27

If you are using steal-stache, what we all do…, we always get can-stache-bindings.

14

I don’t see the distinction between live bindings and other types of bindings. There are a few types of bindings I can see existing:

  • TextNode
  • Attributes
  • Properties
    • ViewModel which is really just a subset of property bindings.
  • Events

These are the only things that exist in HTML/DOM. can-stache’s live bindings are really just TextNode bindings. I don’t understand the case where you would want stache’s TextNode bindings but not its attribute bindings. I would think that if you don’t want any one particular type of bindings you would want to replace the language all together. In my templating engine I don’t make a distinction between TextNode and other types. Would like to hear more about the use case here.

15

I see a big distinction between Mustache + Handlebars bindings, which are used in TextNode, HTML, and attributes bindings like:

<div>{{textNode}}</div>
<div>{{#html}}....{{/html}} {{{alsoHTML}}}</div>
<div class="{{attributeOrProperty}}"/>
<div {{attributesOrProperties}}>

And everything else that has been “thrown on” with the addition of components (viewModels) 2.0 or alternate attribute/property/event bindings 2.3.

There’s things that belong to the Mustache spec involved in 1 way binding … and then there’s everything else.

16

Ah, ok, so then really the issue here is that Stache is a text manipulation language, not an HTML manipulation language. In that context I think the distinction makes sense. can-stache is about manipulating text that will be (eventually) serialized into DOM Nodes. can-stache-bindings is about manipulating DOM Nodes.

Maybe can-stache-bindings should be renamed then? It is not necessarily tied to can-stache in any way that I can think of. can-view-target is what calls the callbacks. Maybe something like can-element-bindings?

1 Like
17

does this still apply? I’m having a hard time to get binding to work

Without importing ‘can-stache-bindings’ I get:

log.js:102 WARN: can-stache/src/expression.js: Unable to find key or helper “value”.

then I tried

import ‘can-stache-bindings’;

The module could not be found (even though it’s present under node_modules/)

Then:

npm install can-stache-bindings --save

and add some 3000+ files

Now I get these error messages:

GET http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-event/package.json 404 (Not Found)
GET http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-util/package.json 404 (Not Found)
GET http://127.0.0.1/SmartSewer/node_modules/can-stache-bindings/node_modules/can-view-scope/package.json 404 (Not Found)

What should be my next move???

18

Hi @Arjen_Haayman, could you check with the latest version of can-stache-bindings (3.9.1)? Are you using Browserify, StealJS, or webpack for module loading?

19

I was on 3.9.0 and now on 3.9.2. I’m using StealJS

20

Ok, I wonder if there are actually multiple versions in your project. What does npm ls can-stache-bindings return? Also, what version of steal?

If you’re using can-component, you don’t have to have can-stache-bindings in your package.json, so removing it might be a fix.