How can I fix it?

How-to Discussions
1

How can I fix it?

<App>
    <Font ux:Global="Linearicons" File="Linearicons-Free.ttf" />

    <Panel>
      <JavaScript>
        var Observable = require('FuseJS/Observable');

        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "\ue82e", // Basket
          "goto": "goItem1"
        }, {
          "title": "Menu Item 02",
          "icon": "\ue82a", // User
          "goto": "goItem2"
        }, {
          "title": "Menu Item 03",
          "icon": "\ue844", // Sent
          "goto": "goItem3"
        }, {
          "title": "Menu Item 04",
          "icon": "\ue820", // Logout
          "goto": "goItem4"
        }];

        function clone(obj) {
          return JSON.parse(JSON.stringify(obj));
        }

        module.exports = {
            getMenuItems: function () { return clone(menuItems); },

            goItem1: function () { console.log("Selected Item1"); },
            goItem2: function () { console.log("Selected Item2"); },
            goItem3: function () { console.log("Selected Item3"); },
            goItem4: function () { console.log("Selected Item4"); }
        }
      </JavaScript>

      <Grid ux:Class="MenuGrid" Background="White" Columns="3,29" ColumnCount="3" Padding="20,20">
        <string ux:Property="MenuIcon" />
        <string ux:Property="MenuText" />
        <string ux:Property="GoingTo" />

        <Text Font="Linearicons" FontSize="25" Value="{Property this.MenuIcon}" Clicked="{Property this.GoingTo}" Alignment="CenterLeft" />
        <Text FontSize="18" Margin="15,0,0,0" Value="{Property this.MenuText}" Clicked="{Property this.GoingTo}" Alignment="CenterLeft" TextAlignment="Right" TextWrapping="Wrap" />
      </Grid>

      <StackPanel>
        <Each Items="{menuItems}">
          <MenuGrid Margin="0,5,0,0" MenuText="{title}" MenuIcon="{icon}" GoingTo="{goto}"  />
        </Each>
      </StackPanel>

    </Panel>
</App>

file
c9pP4QfEvOtJ-legacy-files-a3Wmu6f9scgI5v3S-6_cy65DUdwtWg33_GqTZFGlv.png750×918

2

Hi Onur,

I’m not entirely sure what you’re trying to achieve here without a more detailed description, but one thing that I notice right away is that you’re data binding to menuItems, which is not exported from your module.

3

Anders Schau Knatten wrote:

Hi Onur,

I’m not entirely sure what you’re trying to achieve here without a more detailed description, but one thing that I notice right away is that you’re data binding to menuItems, which is not exported from your module.

You are right! But <Clicked> function not work still!

        module.exports = {
            menuItems: menuItems,
            getMenuItems: function () { return clone(menuItems); },

            goItem1: function () { console.log("Selected Item1"); },
            goItem2: function () { console.log("Selected Item2"); },
            goItem3: function () { console.log("Selected Item3"); },
            goItem4: function () { console.log("Selected Item4"); }
        }

file
file720×800 22.4 KB

4

You’re trying to data bind your Clicked to a string, rather than a function. This won’t work, as you can’t call a string.

If you instead of doing

"goto": "goItem1"

did

"goto": function(){console.log("Menu Item 01 clicked")}

you could get it to work by doing something like this:

<Text Value="{title}" Clicked="{goto}"  />

But that would not work through a string property anyway.

So instead, I suggest you create one handler function, that gets the item to operate on as an argument. Try this:

        function itemClicked(arg)
        {
            console.dir(arg.data);
        }

Then add menuItems: menuItems to your exports, and change your Clicked="{Property this.GoingTo}" to Clicked="{itemClicked}".