-
Notifications
You must be signed in to change notification settings - Fork 0
Data Binding
We Know that alot of applications separate markup and logic into separtate files. In ActiveJS we decided to allow both to work side by side. We enable this with Declerative Expressions
. These expressions make your UI alot easier to read and understand.
In order to bind a variable/property to your template, all you need to do is wrap the property name in Moustache Braces
and place it anywhere in your template like this.
<template>
<p>{{message}}</p>
</template>
By doing this, ActiveJS will get your property value and place it in the position you placed it in.
Directives are special attributes
prefixed with the "@"
symbol that ActiveJS has built in out of the box. They are used to make you development alot faster and apply changes to the DOM when your View Controller data is updated or modified.
-
The
@if
directive is used when you are wanting to render an element depending on atruthy
value in yourView Controller
. For example, lets say you have adiv
which should be displayed when a user doesn't fill in an input field. We would use@if
.<template> <div class="errMsg" @if="error"> Please fill in all required fields </div> </template>
ActiveJS.newController("Directives", { el: "#app", Data() { return { username: "", password: "", error: false } }, methods: { submit() { check = this.validateFields(); if(!check) { this.error = true; } } // other methods for view } })
You can also put expressions in the
@if
directive. All you need to do is place "[expression]" inside the quotations of the@if
. Just make sure to use the keywordthis
and then the value that you are trying to access from your view model. See below for example.<template> <div class="errMsg" @if="[this.error == false]"> Please fill in all required fields </div> </template>
-
The
@bind
directive is very useful. You can use this directive to bind a property in your View Controller to anattribute
on an element. For instance, if you want to apply a class to an element if an error occurs. You would use the@Bind:class
attribute to do so. See the table below for infomation on what you can bind to.Binding Type Description @bind:id String
Allows you to bind your data property to the id
of the element@bind:class String
Allows you to bind your data property to the class
of the element@bind:disabled Boolean
Will add a disbaled
attribute to the element depending on thevalue
of your data property@bind:href String
Will set the href
attribute to the value of your data property<template> <button @bind:class="submitButton">Submit</button> </template>
-
The
@on
directive is used to bind a usersaction
to an element. For example, if you have a button to alert a user's name once it'sclicked
. You would use the@on:click
directive and this would add a click event listener to that element. See the table below for infomation on what you can bind to.Binding Description @on:click This will add a click
event to your element@on:enter This enables you to add an enter
event to your element@on:change This allows you to add an onchange
event to your element@on:submit This allows you to add a submit
event to a form@on:scroll This allows you to add a scroll
event to your element<template> <button @on:click="submit()">Submit</button> <!-- you don't need the () --> <button @on:click="submit">Submit</button> </template>
ActiveJS.newController("Directives", { el: "#app", Data() { return { username: "", password: "", } }, methods: { submit() { check = this.validateFields(); if(!check) { this.error = true; } } // other methods for view } })
You can also pass run a JS expression using the
@on
directive. Just use '[ ]' inside the value and place your JS expresion inside the square brakets. Note that the keywordthis
points to the currently loaded View Controller.<template> <button @on:click="[alert('Hello World')]">Submit</button> <button @on:click="[alert(this.username)]">Submit</button> </template>
ActiveJS.newController("Directives", { el: "#app", Data() { return { username: "Hello World", } } })
-
The
@reflect
directive is a very special attribute. By adding this attribute to an element, you bind the value of that element to the value of your data property in your View Controller. As well as the propery inside your View Controller is bound to the value of the element. This is calledTwo way data binding
. Any updates that happen to theView Controller
, will update theDOM
, as well as any updates that happen in theDOM
will update your View ControllerIn the example below, we have an input which is bound to
userInput
in the View Controller. And a heading which is also bound to the same property.<template> // to display the user input <p>{{userInput}}</p> <input type="text" @reflect="userInput"> </template>
ActiveJS.newController("Directives", { el: "#app", Data() { return { userInput: "", } } })
If you were to type something inside the input field it would set the View Controller property, which would update any other elements in the DOM with the same binding. In this case it would be the paragraph.
-
The
@for
directive can be used to render a list of items based on anarray
. The@for
directive requires a special syntax in the form ofitem in items
, where items is thesource data array
and item is analias
for the array element being iterated on.Say you want to render a list of users which displays some data. Bellow we created an array of users with some data about each user inside of our View Controller
ActiveJS.newController("Directives", { el: "#app", Data() { return { users: [ {name: "James", age: 15}, {name: "Fred", age: 34}, {name: "John", age: 22} ], } } })
Now we build up the
HTML Mocup
for the list. the@for
Directive will loop the the element the directive is placed in. For example, if you add the@for
Directive to anli
element. theli
element will be looped over and iterate over the array passed. To display the array data being looped over, start by addingsquare brackets
inside the looped element. Then insert thealias
you passed as an argument.<template> <ul> <li @for="user in users">Name: [user.name] | Age: [user.age]</li> </ul> </template>
If you are wanting to get the current
index
of the loop, just add:key=""
to the loop element and pass it areference
you want to use.<template> <ul> <li @for="user in users" :key="index">[index] Name: [user.name] | Age: [user.age]</li> </ul> </template>