# Simple MVC in Fuse

**URL:** <https://forums.fusetools.com/t/simple-mvc-in-fuse/6885>\
**Category:** Show and Tell\
**Created:** [October 29, 2015, 9:58am UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885 "2015-10-29T09:58:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vicker\_Leung](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vicker_leung/32/392_2.png) [@Vicker\_Leung](https://forums.fusetools.com/u/Vicker_Leung)\
**Post date:** [October 29, 2015, 9:58am UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885/1 "2015-10-29T09:58:32Z")

</div>

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](https://github.com/vicker/fuse-mixer/tree/master/fuse-mvc)).

`MainView.ux`

```auto
<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`

```auto
<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`

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

var is_flag = new Observable (true);

module.exports =
{
    is_flag: is_flag
};

```

`controller.js`

```auto
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
};

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 29, 2015, 10:15am UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885/2 "2015-10-29T10:15:51Z")

</div>

Great 😃 Thanks for the example!

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [October 29, 2015, 10:46pm UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885/3 "2015-10-29T22:46:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jitcorn94](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jitcorn94/32/316_2.png) [@jitcorn94](https://forums.fusetools.com/u/jitcorn94)\
**Post date:** [December 9, 2015, 1:47pm UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885/4 "2015-12-09T13:47:24Z")

</div>

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 };

```auto
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… \>\<)

---

<div class="post-metadata">

**Author:** ![justinksr](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/justinksr/32/158_2.png) [@justinksr](https://forums.fusetools.com/u/justinksr)\
**Post date:** [December 15, 2015, 8:23am UTC](https://forums.fusetools.com/t/simple-mvc-in-fuse/6885/5 "2015-12-15T08:23:16Z")

</div>

Hi jitcorn94, perhaps [this reference](https://www.fusetools.com/learn/fuse#javascript-module-as-data-source) 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…

```auto
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.