Vodacom/VodaPay Mini Program - Part 4: Data Binding & Buttons

In this guide, we're going to step through the process of data binding and adding in a button.

Data Binding

If you recall from our getting started guide, I had the text hello world in my index.axml

What if I wanted that to be the value of a variable? Data Binding is a fancy term of saying - use the value of a variable when you render this value.

To do this, we must first update our "code" element by adding in the following:

This is essentially a variable defined in JSON.

The next step is to reference it. And we do that by using the "{{ }}" (moustache method) as follows:

So, when the UI is rendered, the value of the variable is substituted and displayed on the screen.

Try only changing the value in the index.js file and saving. You will note that the Device Simulator updates almost immediately.

Now, lets move on to adding a button.

First Objective: Lets render a button on the screen

Add in the following to index.axml and Save.

<button type="primary" onTap="sayHello">Say Hello</button>

You will see that the Simulator now shows the following:

If you're thinking Where's the Simulator?, make sure its activated -

Second Objective: Lets make the button do something!

If we examine the edit we just made, you will note that it is made up of:

<button type="primary" onTap="sayHello">Say Hello</button>

• an XML element - button - this is an indicator of what type of "control" this is
• XML attributes - type and onTap
• each attribute has a value -
  • the value of type is primary - further indicating how it should be rendered/displayed
  • the value of onTap is sayHello - this is the name of the function which should be called with the button is tapped!
• an "inner value" - Say Hello - the text to be displayed

Now, all we have to do is write the code to handle the tap - see screenshot and code snippet below.

  sayHello() {
    console.log('sayHello tapped...');
    my.alert({ content: 'Hello world!' });
  }

Remember to save. We are now ready to test the button click!

Three important notes from the image above:

1. You will note the alert dialog box which is rendered
2. Be sure to active the DevTool so you can see the Console View
3. You will also note that the text sayHello tapped... is written to the console

As an aside, logging to the console and message boxes is my #1 way to debug/test.

Ok - we've achieved quite a bit - but lets do one more thing befor we wrap up. When I click the button, I want to update the value of my variable.

Thats easy enough - right? Just add in the following:

console.log(`name: ${this.data.name}`);
this.data.name = 'Waseem';
console.log(`name: ${this.data.name}`);    

Two important notes here:

1. I'm using "string interpolation" to print the value of the variable - with the fancy ${...}. Note that you must use ` instead of '
2. To reference the "data" JSON object we added at the beginning, you must use the this keyword

But it would have been awesome if the UI updated to reflect the name change instead of just the code. There is a really simple way of achieving this.

this.setData({ name: 'Jim' });

Now, if you click the button, you'll see that the value on the UI has also changed!

So, this was a bumper edition and you should certainly be proud of what you've achieved.

Here's a auick recap:

1. We learnt how to display the value of a variable using data binding
2. We learnt how to add a button
3. We also learnt how to write code to handle a button event
4. We know how to display dialog boxes and write to the console
5. Finally, we discovered how to instruct the UI to "re-render" to display an updated data value

That is an insane amount of learning. It may seem slow - but I hope you're getting the basics. As we move on, you will use these concepts - but give yourself time to learn.

Let me know if you have any questions to tips for other readers.