Generic Button Click Handler?


I am a beginner with FUSE but I am already impressed about its possibilities.

In an app I would like to let the user enter numbers with UI buttons, instead of using the system keyboard. I searched the forum and the internet to find a smart way, but did not find anything.

So is there a more generic way rather repeating code 10 times?

<App Theme="Basic">

    <Grid ColumnCount="3">
        <Button Clicked="{bNum1}" Text="1" Name="button1" />
        <Button Clicked="{bNum2}" Text="2" Name="button2" />


var bNum0 = function () {
    console.log("Button 1 was clicked"  ) ;
var bNum9 = function () {
    console.log("Button 9 was clicked" ) ;

module.exports = {
    bNum1: bNum1,
    bNum2: bNum2,

Sorry, I did not find the code to get syntax high-lighting for javascript?

Hi. I am learning to program and also learnig fuse, so I dont know if this will help you, but I had a similar need and I solved it this way,

        function createNumbers(){
            var numbers = [];
            for(var i = 0; i < 10; i++){
                numbers.push({number: i, name: 'button' + i});

            return numbers;

        var numbers = createNumbers();

        function  handler(args) {
            console.log("Button " + + " was clicked")

        module.exports = {
            numbers: numbers,
            handler: handler

Basically just create an array of objects and then use the Each tag

    <Each Items="{numbers}">
        <Button Clicked="{handler}" Text="{number}" Name="{name}" />


I’ve tried similar, the main issue then is, how to arrange the buttons. E.g. A Keypad is usually 3 rows with 4 columns. Without using ‘Each’, is it possible to address the individual array elements, like

<Button Clicked="{handler}" Text="{number[x]}" Name="{name[x]}" />   x: 0-9?

With ‘Each’ I do not know how to nicely arrange the buttons.

Something like this:

<App Theme="Basic">
        var Observable = require('FuseJS/Observable');
        var typed = Observable('');
        var buttons = [1,2,3,4,5,6,7,8,9,'none',0,'none'];
        function click(args) {
            typed.value = typed.value +;
        module.exports = {
            buttons: buttons,
            typed: typed,
            click: click
        <Text Value="{typed}" Dock="Top" />
      <Grid ColumnCount="3" RowCount="4" Dock="Fill">
          <Each Items="{buttons}">
                  <Match Value="{}">
                      <Case String="none">
                          <Panel />
                      <Case String="other" IsDefault="true">
                        <Button Clicked="{click}" Text="{}" />


Great, exactly what I was looking for!

Thanks a lot.