Trying to insert data non related to model produces null

I'm trying to type some numbers that are not directly related to the model based on this example.

My code

HTML:

<input data-bind="value: screenText" />
<div>
    <div>
        <div data-bind="with: '1'">
            <a data-bind="text: $data,click: $root.keyPushed" href="#"></a>
        </div>
        <div data-bind="with: '2'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
        <div data-bind="with: '3'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
    </div>
    <div>
        <div data-bind="with: '4'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
        <div data-bind="with: '5'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
        <div data-bind="with: '6'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
    </div>
    <div>
        <div data-bind="with: '7'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
        <div data-bind="with: '8'">
            <a data-bind="text: $data,click: $root.keyPushed"  href="#"></a>
        </div>
        <div data-bind="with: '9'">
            <a data-bind="text: $data,click: $root.keyPushed"   href="#"></a>
        </div>
    </div>
</div>


<a>Llamar</a>
<div data-bind="with: 'hi'">
    <a data-bind="text: $data,click: $root.keyPushed" href="#"></a>
</div>

JAVA:

package dew.demo.namesmodel;

import java.util.logging.Level;
import java.util.logging.Logger;
import net.java.html.json.Model;
import net.java.html.json.Property;
import net.java.html.json.Function;

@Model(className = "Data", properties = {
    @Property(name = "screenText", type = String.class)
})
class DataModel {
   @Function
    static void keyPushed(Data model, String keyPress) {
        System.out.println(keyPress);
        model.setScreenText(model.getScreenText()+keyPress);
    }

   static {
    Data ui = new Data();
        ui.setScreenText("1");
        ui.applyBindings();
   }

}

As perhaps you may have notticed, the idea is to use the input as a display and append the key value when clicked.

¿Is this possible or do I have to take the approach to incluse it into the data model forcefully?

Thank you in advance.

In your function, you're setting $data using the with-binding. So you want to access $data in your function. Do it like this:

@Function
static void keyPushed(Data model, String data) {
    System.out.println(data);
    model.setScreenText(model.getScreenText()+ data);
}