The Single File View

In this section, we will teach you all the basics and fundamentals of the ActiveJS SFV (Single File View) to enable you to start building amazing and beautiful projects. We will go over the basics of how to structure your View and will explain the different parts of it, and what it does. So lets get started! The SFV is a .html file which will define a page or View inside of your application. It must always contin the following to help you define your views the way you want to.

The Template

back to top

This is where you would put all of the mochup for the page in your application. See example below.

<template>  
  <h1>Hello World!</h1>
</template>

The Style

back to top

The style tage is where you would put all the styles for your view. Like below:

<style>
  h1 {
    color: #ffffff;
    padding: 10px 5px;
  }
</style>

The style tag also accepts the scoped attribute. This will stop all the style for your view from leaking out to other views. This means you can have two <div> tags with the same class, but have different styles.

warning : The "scope" attribute is still in a beta stage

<style scoped>
  h1 {
    color: #ffffff;
    padding: 10px 5px;
  }
</style>

The Script

back to top

This is where you register your view to ActiveJS and define all the buisiness logic for your view. First you will need to import {newController} from ActiveJS in your packages. then supply a View Name and a Controller

<!-- You can either have the js in the script tag -->
<script>
  ActiveJS.newController("vewName", {
    el: "#app",
    Data() {
      return {
        message: 'Hello World!'
      }
    },
  })
</script>

<!-- Or you can pull in the js from another JS file -->
<script src="./views/vewName.js"></script>

The View Controller

back to top

Your View Controller expects at least 2 properties being ( el and Data ), but has a few others. See the table below for more info:

Name	Type	Description	(-------)
el	String	This is where you want your view to render to	see above
Data	Method	This is a method which returns an object with all your properties for the view	see above
components	Array	An array of strings with the names of components you are using in your template	example
observers	Object	This is an object of methods with names of properties defined in your Data() method	example
computed	Object	This is an object of methods which will generate properties for you	example
methods	Object	An object of all your methods for the view	example
_Mounted	Method	A life cycle method which is called before anything has rendered	example
_Rendered	Method	A life cycle method which is called after anything has rendered	example
_beforeUpdate	Method	A life cycle method which is called before anything has updated in the DOM	example
_Update	Method	A life cycle method which is called after anything has updated in the DOM	example
helpers	Object	An object of helper methods that alow you access to ActiveJS	example

• ActiveJS Props Example

  back to top

  You can set a property in your view data to the value of one of the props inside of the _Mounted using this.$props life cycle method. See below example:

  ActiveJS.newController("Props", {
    el: "#app",
    Data() {
      return {
        propData: false
      }
  },
    _Mounted() {    
      this.propData = this.$props.prop1;
      // or
      this.propData = this.$props;
    }
  })

• ActiveJS Observers Example

  back to top

  An observer is a method which will watch for a property in your view data to change. Once the data does change, the observer will perform an action you supplied. To create an observer, first add the observers object to your view controller. Then add a method inside of the object with the method's name being the same as the name of the property you wish to observe. See example below:

  ActiveJS.newController("Observers", {
    el: "#app",
    Data() {
      return {
        message: 'Hello World!'
      }
    },
    observers: {
      message() {
        console.log("the property 'message' has been updated");
      }
    }
  })

• ActiveJS Computed Properties

  back to top

  A computed property is a method which sets a property in your view data to the return value of said computed method. Your create a computed method by first adding the computed object to your view controller. Then add a method with the name you wish to access via your controller. Make sure that your computed methods ALWAYS return a value. See example below:

  NOTE : As you can see, the computed method uses 2 data properties. If either of these properties change, the computed method will run and update it's computed value.

  ActiveJS.newController("Computed_Properties", {
    el: "#app",
    Data() {
      return {
        productPrice_1: 10,
        productPrice_2: 5,
      }
    },
    computed: {
      total() {
        return this.productPrice_1 + this.productPrice_2;
      }
    }
  })

• ActiveJS Methods Example

  back to top

  This is an object of all the custom methods you would want to call due to user interaction or during a proccess flow. To add a method to your controller, first add the methods object to the controller and inside of it, add your method. See example below:

  <template>
    <h3>Counter: {{counter}}</h3>
    <button @on:click="addToCounter()">Add</button>
  </template>

  ActiveJS.newController("Methods", {
    el: "#app",
    Data() {
      return {
        counter: 0
      }
    },
    methods: {
      addToCounter() {
        this.counter = this.counter++;
      }
    }
  })

• ActiveJS Helpers Example

  back to top

  This is an object of helper functions that ActiveJS reveals to you. These methods are there to help you access something like a library you added to your project. See example below:

  ActiveJS.newController("Methods", {
    el: "#app",
    Data() {
      return {
        URL: ""
      }
    },
    methods: {
      addToCounter() {
        const common = this.helpers.getLib("common");
        this.URL = common.getURL();
      }
    }
  })

  See the avaliable helper methods below:

  Name	Description	(params)
  getLib	Gets a library that you loaded into ActiveJS	(key="library name")