not found in data context

General
1 
<JavaScript>

	var ROOT_URL = "127.0.0.1:8000/api/register";

	var Observable = require("FuseJS/Observable");

	var data = Observable(
			{fname: ""},
			{lname: ""},
			{password: ""},
			{email: ""});

	function apiFetch(path, options) {
		var url = encodeURI(ROOT_URL + path);

		if(options === undefined) {
			options = {};
		}
		
		// If a body is provided, serialize it as JSON and set the Content-Type header
		if(options.body !== undefined) {
			options = Object.assign({}, options, {
				body: JSON.stringify(options.body),
				headers: Object.assign({}, options.headers, {
					"Content-Type": "application/json"
				})
			});
		}
		
		// Fetch the resource and parse the response as JSON
		return fetch(url, options)
			.then(function(response) { return response.json(); });
	}

	function register(fname, lname, email, password) {
		return apiFetch("articles", {
			method: "POST",
			body: {
				fname: fname,
				lname: lname,
				email: email,
				password: password,
			}
		});
	}

	

	module.exports = {
		register: register,
		apiFetch: apiFetch,
		data: data,
	};

</JavaScript>


<ClientPanel Color="#FF7977">
	<TextInput Value="{lname}" Margin="0, 0, 89, 30" TextWrapping="NoWrap" TextAlignment="Center" Alignment="Center" PlaceholderText="Fname" PlaceholderColor="#FEFFFF" Opacity="0.386"></TextInput>
	<TextInput Value="{fname}" PlaceholderText="Lname" Alignment="Center" Margin="0, 20, 90, 0" PlaceholderColor="#FEFFFF" Opacity="0.386"></TextInput>

	<TextInput Value="{email}" PlaceholderText="Email" Alignment="Center" PlaceholderColor="#FEFFFF" Margin="0, 60, 99, 0" Opacity="0.386"></TextInput>
	
	<TextInput Value="{password}" Alignment="Center" PlaceholderColor="#FEFFFF" Margin="0, 108, 64, 0" PlaceholderText="Password" Opacity="0.386"></TextInput>
	

	<Button Clicked="{register}" Text="Register" Alignment="BottomCenter" Margin="0, 0, 0, 100" Color="#FEFFFF" Background="#FEFFFF" Width="130" Height="30"><Shadow Angle="70" />
	</Button>

</ClientPanel>
2

Problems:
{lname} not found in data context
{fname} not found in data context
{email} not found in data context
{password} not found in data context

3

In UX, you can data-bind to everything that is added to your module.exports object in JS:

    module.exports = {
        register: register,
        apiFetch: apiFetch,
        data: data,
    };

None of the variables you’re getting those errors about (lname, fname, email, password) are added to your module.exports.