Simple MVC in Fuse

Show and Tell
1

A working example for Fuse v0.8.4 showing how to implement a MVC structure using Fuse. Full source code available on GitHub (https://github.com/vicker/fuse-mixer/tree/master/fuse-mvc).

MainView.ux

<App Theme="Basic">

    <!-- including external JavaScript files so that they can be required globally -->
    <JavaScript File="model.js" ux:Global="Model" />
    <JavaScript File="controller.js" ux:Global="Controller" />

    <View />

</App>

views\View.ux

<StackPanel>

    <JavaScript>

        // exposing model and controller to this view
        var model_is_flag = require ('Model').is_flag;
        var controller_toggle_flag = require ('Controller').toggle_flag;

        module.exports =
        {
        is_flag: model_is_flag,
        toggle_flag: controller_toggle_flag
        };

    </JavaScript>

    <WhileTrue Value="{is_flag}">
        <Set _button.Visibility="Visible" />
    </WhileTrue>

    <WhileFalse Value="{is_flag}">
        <Set _button.Visibility="Hidden" />
    </WhileFalse>

    <Button ux:Name="_button" Text="is_flag controlled button" />

    <Button Text="Toggle Visibility">
        <Tapped>
            <Callback Handler="{toggle_flag}" />
        </Tapped>
    </Button>

</StackPanel>

model.js

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

var is_flag = new Observable (true);

module.exports =
{
    is_flag: is_flag
};

controller.js

var model_object = require ('Model');

function toggle_flag ()
{
    console.log ("controller > toggle_flag")
    model_object.is_flag.value = !model_object.is_flag.value;
}

module.exports =
{
    toggle_flag: toggle_flag
};
2

Great :smiley: Thanks for the example!

3

Nice example, thanks! I’ve had some people ask about how to do this specifically; now I have a place to send them :smiley:

4

Hi there, I am not sure what the following code means

module.exports = { is_flag: model_is_flag, toggle_flag: controller_toggle_flag };

I tried tweaking with the following, but it gave an error of “Callback not found: toggle_flag”

module.exports = { model_is_flag: model_is_flag, controller_toggle_flag: controller_toggle_flag };

As far as I can find out on google, module.exports seems to suggests exposing functions so that other files can access it. But I am still not really clear if toggle_flag: controller_toggle_flag is a key and hash value? or does it have some other syntax which I failed to understand.

It would be great if you could shed some light on this. Please forgive me if this is an easy question because I’m just beginning to learn how to code. Cheers:D

(not sure why the code didn’t get highlighted correctly… ><)

5

Hi jitcorn94, perhaps this reference could help you out?

[Disclaimer: I, too, am very new to coding, but just hoping I could help a fellow newbie out XD]

From my understanding, module.exports works like this…

module.exports = {
    uxName : jsName,
    UseThisInUX : UseThisInJavaScript
};

And so since you changed the existing uxName from "toggle_flag" to "controller_toggle_flag", you no longer export anything with the name "toggle_flag" from the JavaScript, therefore you get the “Callback not found: toggle_flag” error.