Tried to find something that addressed this but couldn’t find anything. Anyway, am new to Fuse and am trying to change a view (right now just using a simple array).
If I call the function directly using “filterPlaces();” it works fine but trying to set the array based on the search entry doesn’t seem to change the view (even though in the log I can see that it is filtering).
Any help would be hugely helpful - just trying to get the basic concept before I try and hook this up to a real backend.
Thanks!
Array (separate file):
//var Observable = require("FuseJS/Observable");
var MyPlaces = [
{
id: 0,
name: "Alameda",
neighborhood:"GREENPOINT",
address:"195 Franklin Street., Brooklyn",
image: "img/alameda.jpg",
map:"img/maps/alameda-map.png",
postedby: "@angelo",
comment: "Bar furnishing classy cocktails & elevated American snacks amid eye-catching, tile-&-wood decor.",
list: ["dive bars ","fav bars in greenpoint", "pasta happy hours"]
},
{
id: 1,
name: "Capri Social",
neighborhood:"greenpoint",
address:"156 Calyer Street, Brooklyn",
image: "img/capri-social.jpg",
map:"img/maps/capri-social-map.png",
postedby: "@angelo",
comment: "The drinks, cheapest in all of Greenpoint and old jukebox in the back of the bar that includes songs by artists as different as Johnny Cash, Queen and Justin Timberlake.",
list: ["dive bars"]
},
{
id: 2,
name: "Baby's Alright",
neighborhood:"williamsburg",
address:"146 Broadway., Brooklyn",
image: "img/BabysAllRight.jpg",
map:"img/maps/babys-alright-map.png",
postedby: "@angelo",
comment: "Cool haunt offering live music most nights, plus gourmet bar fare, creative drinks & weekend brunch.",
list: ["dive bars","fav bars in greenpoint"]
},
{
id: 3,
name: "Goldie's",
neighborhood:"williamsburg",
address:"195 Franklin Street., Brooklyn",
image: "img/goldies.jpg",
map:"img/maps/alameda-map.png",
postedby: "@angelo",
comment: "Creative cocktails & full bar offerings served in a sleek space with a Vegas throwback feel.",
list: ["dive bars","fav bars in greenpoint"]
},
{
id: 4,
name: "Torst",
neighborhood:"williamsburg",
address:"195 Nassau Ave., Brooklyn",
image: "img/torst.jpg",
map:"img/maps/alameda-map.png",
postedby: "@angelo",
comment: "Hip, wood-clad Danish bar doing boutique beers & a compact food menu.",
list: ["dive bars","fav bars in greenpoint"]
}
];
module.exports = MyPlaces;
Javascript:
<JavaScript>
var Observable = require("FuseJS/Observable");
var MyPlaces = require("Modules/MyPlaces");
var filteredPlaces = MyPlaces;
var searchString = Observable("");
filterPlaces();
function filterPlaces() {
var places = MyPlaces;
console.log("inside filter");
console.log("places 1 name = "+places[0].name);
console.log("places 1 name = "+places[0].neighborhood);
console.log("places 2 name = "+places[1].name);
MyPlaces = [];
for (var i = 0; i < places.length; i++) {
lower = places[i].neighborhood.toLowerCase();
//(lower.includes(searchString.value))
//(lower.includes("green"))
if (lower.includes("will")) {
console.log("in if ");
MyPlaces.push(places[i])
}
}
}
module.exports = {
//onSearch: onSearch,
MyPlaces:MyPlaces,
searchString: searchString,
filteredPlaces:filteredPlaces,
filterPlaces: filterPlaces
};
</JavaScript>
UX:
<TextInput Value="{searchString}" ActionTriggered="{filterPlaces}" ux:Name="search" PlaceholderText="Search Neighborhood" Font="OpenSansLt" Alignment="Center" PlaceholderColor="#ccc" Height="50" Width="97%" Padding="10" Margin="0,0,0,0" Background="#FFF">
<Rectangle Layer="Background" CornerRadius="0">
<Stroke Width="0" Brush="#BBB" />
</Rectangle>
<DropShadow Angle="45" Size="1" Distance="1" Spread="0.1" Color="#ccc" />
</TextInput>
Each tag is: <Each Items="{MyPlaces}">