Well, there are a number of things wrong with the code you posted. Here, let me break it down for you:
<!-- First of all, either you did not have an opening App tag, or you did not post your full code -->
<App Background="#eee">
<!-- Then, notice how you had Javascript, while the correct syntax is JavaScript (note the capital S) -->
<JavaScript>
var Observable = require('FuseJS/Observable');
var list = Observable(
{"id":"01", "text":"first"},
{"id":"02", "text":"second"},
{"id":"03", "text":"third"}
);
function edit(arg){
console.log("edit clicked: " + JSON.stringify(arg.data));
// router.push("admin_page");
}
// here, module.exports is an object! And it ends with an s, not like you had it.
module.exports = {
'list': list,
'edit': edit
};
// and again, correct syntax for JavaScript
</JavaScript>
<StackPanel Width="100%" Margin="20,3,20,3">
<StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
<DockPanel Width="50%" Alignment="Left" Height="100%">
<Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
<Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff"></Text>
</Button>
<!-- There is no {refresh} to be called in JS!!! -->
<!-- There are no {StyleVariables} exported from JS!!! -->
<Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
<Text Alignment="Center" Width="40%" Value="Reload" Color="#fff"></Text>
</Button>
</DockPanel>
<!-- There is no {result_count} exported from JS!!! -->
<Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
</StackPanel>
<!-- And the part following this was a mess... -->
<StackPanel ItemSpacing="3">
<!-- You do want to put the StackPanel outside of Each, so that the looped items get stacked! -->
<Each Items="{list}">
<!-- The height should be set on a Panel, not a StackPanel, for a number of reasons. -->
<!-- Here, you should also use a HitTestMode to make the entire block respond to click events, otherwise it's hard to hit on devices (butter fingers!) -->
<Panel Background="#aaa" Height="90" HitTestMode="LocalBoundsAndChildren">
<!-- And instead of using a Button with a Clicked property, just go with a Clicked event and have a Callback with a Handler in it. Much more easier to construct whatever visual you need for a button of your own. -->
<Clicked>
<Callback Handler="{edit}" />
</Clicked>
<Text Alignment="Center" Value="Click me" Color="#fff" />
</Panel>
</Each>
</StackPanel>
</StackPanel>
</App>
Well, there are a number of things wrong with the code you posted. Here, let me break it down for you:
<!-- First of all, either you did not have an opening App tag, or you did not post your full code -->
<App Background="#eee">
<!-- Then, notice how you had Javascript, while the correct syntax is JavaScript (note the capital S) -->
<JavaScript>
var Observable = require('FuseJS/Observable');
var list = Observable(
{"id":"01", "text":"first"},
{"id":"02", "text":"second"},
{"id":"03", "text":"third"}
);
function edit(arg){
console.log("edit clicked: " + JSON.stringify(arg.data));
// router.push("admin_page");
}
// here, module.exports is an object! And it ends with an s, not like you had it.
module.exports = {
'list': list,
'edit': edit
};
// and again, correct syntax for JavaScript
</JavaScript>
<StackPanel Width="100%" Margin="20,3,20,3">
<StackPanel Orientation="Vertical" MinHeight="50" Margin="0,0,0,10">
<DockPanel Width="50%" Alignment="Left" Height="100%">
<Button Dock="Top" Padding="5,5,5,5" Margin="0,3,0,10" Color="{StyleVariables.primaryColor}" Clicked="{delete_all}">
<Text Alignment="Center" Width="40%" Value="Delete All" Color="#fff"></Text>
</Button>
<!-- There is no {refresh} to be called in JS!!! -->
<!-- There are no {StyleVariables} exported from JS!!! -->
<Button Dock="Top" Padding="5,5,5,5" Color="{StyleVariables.primaryColor}" Clicked="{refresh}">
<Text Alignment="Center" Width="40%" Value="Reload" Color="#fff"></Text>
</Button>
</DockPanel>
<!-- There is no {result_count} exported from JS!!! -->
<Text Margin="0,3,0,3" Value="{result_count}" Alignment="Left"></Text>
</StackPanel>
<!-- And the part following this was a mess... -->
<StackPanel ItemSpacing="3">
<!-- You do want to put the StackPanel outside of Each, so that the looped items get stacked! -->
<Each Items="{list}">
<!-- The height should be set on a Panel, not a StackPanel, for a number of reasons. -->
<!-- Here, you should also use a HitTestMode to make the entire block respond to click events, otherwise it's hard to hit on devices (butter fingers!) -->
<Panel Background="#aaa" Height="90" HitTestMode="LocalBoundsAndChildren">
<!-- And instead of using a Button with a Clicked property, just go with a Clicked event and have a Callback with a Handler in it. Much more easier to construct whatever visual you need for a button of your own. -->
<Clicked>
<Callback Handler="{edit}" />
</Clicked>
<Text Alignment="Center" Value="Click me" Color="#fff" />
</Panel>
</Each>
</StackPanel>
</StackPanel>
</App>
Hope this helps.
thats not the complete code tho.
still not working. ok, check this out UX only. The desktop preview works perfectly, but on android nothing happens
How do you expect anyone to help you if you’re not posting full code?
Plus, you clearly did not spend the time to comprehend what I suggested you do inside of that Each, since you’ve reverted back to using a Button and basically complaining that “the way it did not work before, still does not work”. Well, it’s very likely not going to change.