Events

Basic Concepts

Actions of mouse click inside template(tpl) are different from vanilla JavaScript, but close to vue. It’s done via attribute starting with @

//JavaScript
<p onclick="anyFunction()">Click</p>

//Jet.Js
<p @click="anyFunction()">Click</p>

You can trigger(value inside of @click=””):

• Local component methods(myLocalMethod())
• Global functions(app.anyFunction())
• Direct assignments (show = true)
• Chained actions, you can add as many function as you wish (save(); close())

Note: Chaned data changing not supported for now, it’s planned in next versions, use a method instead

//not correct
❌<p class="b-blue" @click="value1='Any new value';value2='Another value'">Next</p> 
//correct
<p class="b-blue" @click="func()">Next</p>

//full example
com({
  name: 'my-app',
  data: {
    value1: 'Hello!',
    value2: 'I am Jet.Js',
  },
  tpl() {
    return `
    <h1>{{value1}}</h1>
    <h2>{{value2}}</h2>
    <p class="b-blue" @click="func()">Next</p>
    `;
  },
  methods: {
    func() {
      this.value1 = 'I am a rective framework';
      this.value2 = 'Small, Smart, Simple, Stylish';
    },
  },
});

Modifiers

• .prevent stops default action.
• More modifiers coming soon!

//this prevent loading page, but changed content via method
<a href="http://mysite.com/about" @click.prevent="load content('about')">About</a>
//useful if you want keep real link for SE, but load content dynamcly