Getting Started

You can start coding with Tulipan.js fast and simple, let's dive into the most basic with Tulipan, let's code our first application. A to-do list app.

Data bindings

The first thing to grasp is the binding of the model's data into our HTML. Since Tulipan uses DOM templating rules we can start with the following code.

HTML

<div id="app">
  {{ todo }}
</div>

JavaScript

new Tulipan({
  el: '#app',
  data: {
    todo: 'clean the room!'
  }
})

Which will render

clean the room!

Two-way binding

Now we want to render based on user interaction, we can use an input to bind the user input into the DOM.

<div id="app">
  <p>{{ todo }}</p>
  <input tp-model="todo">
</div>

JavaScript

new Tulipan({
  el: '#app',
  data: {
    todo: 'clean the room!'
  }
})

Which will render

{{ todo }}

the main difference in this case is that we used a html custom attribute tp-model, this attribute is inspected by Tulipan to perform the two-way binding. In the following examples we will use this same format tp-attr to perform other actions.

Binding sequences

Sometimes we need to render a list of items, in our case is a list of to-dos.

HTML

<div id="app">
  <ul>
    <li tp-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

JavaScript

new Tulipan({
  el: '#app',
  data: {
    todos: [
      { text: 'Clean the room!' },
      { text: 'Take out trash!' },
      { text: 'Buy groceries' }
    ]
  }
})

Which will render

  • Clean the room!
  • Take out trash!
  • Buy groceries

As you can see we can also bind properties from our data, and using the tp-for attribute we can tell Tulipan to iterate over a set of elements.

Adding elements dynamically

Let's now try to add new elements with our input.

HTML

<div id="app">
  <span>Enter to-do: </span><input tp-model="newTodo" tp-on:keyup.enter="addTodo">
  <ul>
    <li tp-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

JavaScript

new Tulipan({
  el: '#app',
  data: {
    newTodo: "",
    todos: [
      { text: 'Clean the room!' },
      { text: 'Take out trash!' },
      { text: 'Buy groceries' }
    ]
  },
  methods: {
    addTodo: function(){
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    }
  }
})

Which will render the following

Enter to-do:
  • {{ todo.text }}

This time you can add new to-dos to the list by pressing enter on the text input. A new thing introduced in this exercise was the capability of adding a custom method to our ViewModel, and trigger this method through user input.

Let's remove some elements

We now have graps some of the basics in our application, let's put some code to remove those finished to-dos.

HTML

<div id="app">
  <span>Enter to-do: </span><input tp-model="newTodo" tp-on:keyup.enter="addTodo">
  <ul>
    <li tp-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button tp-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

JavaScript

new Tulipan({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Clean the room!' },
      { text: 'Take out trash!' },
      { text: 'Buy groceries' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})

Which will render

Enter to-do:
  • {{ todo.text }}

Pretty cool right?

This was the basic on Tulipan.js, in the following sections you will find how to perform more advanced front-end features. So you can create Single Page Applications as soon as you can say Tulipan.