Hey All,
So I just started using Fuse Tools last week and am loving it so far. Docs are way better than NativeScript and I can actually build stuff with it. There is a “but”. I’m a little lost on how to do a few things with it.
Right now I’m doing an app for a local large farmers market and one of the features are recipes. You enter in the name and then a list of foods is displayed. I want the user to be able to click on the food item and for the opacity to go from 0.5 to about 1 and then the checkmark (haven’t figured that one out yet, probably an image) to switch to a red delete button.
Problem is my conditionals for a WhileTrue are not working, it doesn’t like - foods.indexOf(name) != -1:
“No type with value binding alias ‘foods.indexOf(name.value)’ found”
So I’m not sure how to switch between the two buttons. Also not sure how one would flip the opacity also on a not simple conditional. Any help is greatly appreciated! Thanks.
Hi! We are working on expanding ux-expressions to be used for cases like this as well, but what you’re asking for is still best achieved using some JavaScript. I’ve made a complete example for you:
<App>
<DockPanel>
<JavaScript>
var Observable = require("FuseJS/Observable");
var input = Observable("");
function Name(name){
var self = this;
this.name = name;
this.hide = Observable(function(){
return self.name.toLowerCase().indexOf(input.value.toLowerCase()) !== -1 && input.value.length > 0;
});
}
var names = Observable(
new Name("Abbott"),
new Name("Abel"),
new Name("Abner"),
new Name("Abraham"),
new Name("Adar"),
new Name("Addison"),
new Name("Adler"),
new Name("Adley"),
new Name("Adrian"),
new Name("Aedan"),
new Name("Aiken"),
new Name("Alan"),
new Name("Alastair"),
new Name("Albern"),
new Name("Albert"),
new Name("Albion"),
new Name("Alden"),
new Name("Aldis"),
new Name("Aldrich"),
new Name("Alexander"),
new Name("Alfie"),
new Name("Alfred"),
new Name("Algernon"),
new Name("Alston")
);
module.exports = {
input: input,
names: names
};
</JavaScript>
<TextInput Dock="Top" Value="{input}" PlaceholderText="Input name" Height="80"/>
<StackPanel>
<Each Items="{names}">
<Panel ux:Name="item" Height="60" Color="#ddd" Margin="5" Opacity="0.4">
<Text Value="{name}" />
<WhileTrue Value="{hide}">
<Change item.Opacity="1" />
</WhileTrue>
</Panel>
</Each>
</StackPanel>
</DockPanel>
</App>
I hope this was what you were looking for 
Thanks man. I’ll definitely take a look at this later on today or tomorrow and let you know if that’s what I’m looking for, but it looks good Wasn’t aware about returning a function inside of an observable - tying it to a WhileTrue, that’s great.
Great! Let me know how it goes!
Awesome, it works! Thanks a lot.
