Skip to content
This repository was archived by the owner on Feb 23, 2023. It is now read-only.

Data Binding

Jump to bottom
Jordan Langton edited this page Jul 21, 2020 · 1 revision

back to top

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.

How to Bind a property

back to top

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

back to top

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.

  • @if Directive

    The @if directive is used when you are wanting to render an element depending on a truthy value in your View Controller. For example, lets say you have a div 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 keyword this 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>

  • bind Directive

    back to top

    The @bind directive is very useful. You can use this directive to bind a property in your View Controller to an attribute 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 the value 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>

  • @on Directive

    back to top

    The @on directive is used to bind a users action to an element. For example, if you have a button to alert a user's name once it's clicked. 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 keyword this 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",
    }
  }
})

  • @reflect Directive

    back to top

    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 called Two way data binding. Any updates that happen to the View Controller, will update the DOM, as well as any updates that happen in the DOM will update your View Controller

    In 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.

  • @for Directive

    back to top

    The @for directive can be used to render a list of items based on an array. The @for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias 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 an li element. the li element will be looped over and iterate over the array passed. To display the array data being looped over, start by adding square brackets inside the looped element. Then insert the alias 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 a reference you want to use.

    <template>
  <ul>
    <li @for="user in users" :key="index">[index] Name: [user.name] | Age: [user.age]</li>
  </ul>
</template>
Clone this wiki locally