I have an Ember app that has a template with several dropdown menus(the dropdown menus are in a component.hbs).
Inside the component.js, there is a custom array (ingredients) that takes objects from the model and filters them depending of the selections.
The problem is that the data doesn't refresh automatically for the following selectors, I have to refresh the website to be able to see the next options.
For example: 2 selectors: "recipies" and "ingredients"
A user selects "meatloaf". The ingredients selector, that would take the data from a custom array in the component, doesn't refresh itself in order to display only the ingredients for meatloaf.
I'm assuming this is happening because the component.hbs (and the ingredientes array)have been rendered and loaded when the user visits the website, but I need to find a way to refresh the ingredients array everytime a user selects a recipe
So, I just figured it out.
It was way more simple than I thought.
In the same action that is triggered when the user selects a recipe, I empty the array for ingredients, and then fill it out with what the ingredients related to the selection.
Define computed property in the component, which will be recalculated whenever selectedRecipe changes.
ingredients:Ember.computed('selectedRecipe', function(){
// do filtering stuff and return the result
return this.get('customArray').filterBy('name',this.get('selectedRecipe'));
})
Related
I have a component called PastIssues, which lists all of the past editions of a magazine. The output of the component is an ordered list where each item is the year of release followed by the season. For example:
Spring:2014
Autumn:2015
Each of these items is a Link that points to a specific path. I've dynamically added to this component, such that my ShowArticleInfo component will be displayed. My issue lies, when the user clicks one of the Links, my ShowArticleInfo component gets rendered, but only below ordered list. I would like my ordered list to disappear, such that the only remaining component is ShowArticleInfo.
So before the user clicks anything, I want a list of links, one for each article (in the example above). After a user clicks one of them, I want the list to disappear and only ShowArticleInfo to appear.
Is there an elegant way to do this?
Use local storage to set a key with value true
componentDidMount(){
localStorage.setItem('loaded','true');
}
and clear local storage when u unmount component ShowArticleInfo.
In your ordered list component render.
render(){
let loaded = localStorage.getItem('loaded');
return(
<div style={{display:{loaded ==='true' ? 'none':'block'}}>
</div>
)
}
For further info on localstorage MDN/localstorage.
Is there a way to programmatically change the collection of a gallery in wix. I have a wix store and I want to add costume filter options. I know you can add some in the editor but if the collection is empty I cant add it to the filter options and I don't want to have to go through the editor and add that filter every time I get an inventory of that product. So I want to use radio buttons and write my own filter code and if the collection is empty I want to display that or show some type of message. I have the coded filter successfully running a query to find all products that contain a certain "String". I want to take that array of products and populate a store-gridGallery programmatically but I don't see any properties of the gridGallery that allow me to do this. Any Suggestions??
You can replace the store grid gallery with a repeater, creating your own store product gallery. Then, using Wix Code inputs and wix-data filter, you can code your own set of filters.
e.g.
Assume you are using a dataset connected to a repeater to show the store products as a gallery. You can then set the dataset filter using
import wixData from 'wix-data';
export function filterElement_onChange(event) {
let value = $w('#filterElement').value;
$w('#dataset1').setFilter(wixData.filter().eq('a field', value));
}
(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.
I have set up a CGridView widget in my application. It displays a list of user accounts. I also have two other drop down lists that basically filter out the users. My problem is that I cannot use the values from the drop down lists to filter out the users. What I actually need is to refresh the list of user accounts based on the selected values from the drop down lists.
How am I supposed to do that with Javascript?
Yes you use Javascript to do this. CGridView's jquery.yiigridview.js has $('#id-of-grid').yiiGridView('update', options) function which can be used for such things:
function(){// in your function
$('#id-of-grid').yiiGridView('update', {data: {value_of_list: $(this).val()}});
}
This will call the url that renders this view with a parameter value_of_list with the value selected in the drop down.
Edit:
The $('#id-of-grid').yiiGridView('update', options) signature indicates that you can specify which grid to update, and also the specific options to be sent. In the above example i have sent only data, i could have also specified which url to send the data to using url option. The full list of options can be seen in the link i have specified above.
I have two collections instantiated: items and sections.
Each section can have multiple items and each item can occur in more than one section.
When I add an item to a section I want to get the hash of that item and save it to an array attribute of the section. This array attribute is used to determine which items are displayed in each section.
So let's say that I have a ItemListModel with 100 items and I have a section with an 'items' attribute with the array [ item3_id_hash, item27_id_hash, item59_id_hash ]. When I display the SectionView, I first map those hash ids to the Items collection to get those objects and then I create an ItemsView that displays only those objects.
The problem I have is in identifying those Items upon creation and upon deletion so that I can get their ids and add/remove them from the section.item attribute array.
I can think of a hackish solution to identify the item upon addition by setting a global variable called parent. I want to avoid using globals however.
Removing is another matter entirely. When the user clicks the X to delete an item in the view, I can't figure out how I can either identify the parent Section's model, or at the very least identify its ID.
Example view:
Section_1
Item_1
Item_2
Item_3
Section_2
Item_4
Item_5
Item_6
If the user deletes Item_2 from the view, how can I get Section_1.model.get('id') so I can get the section_1 object and then remove the 'id' for Item_2 from the 'items' array attribute in Section_1
The only solution I can think of is passing the 'id' for Section_1 to the HTML view when I draw ItemsView for Section_1. This is hackish and fragile so I was trying to avoid it.
FYI: SectionListView instantiates one or more SectionsViews, each of which instantiate one ItemListView, which instantiates one or more ItemViews
You should always go back to the model. If you want to remove an item, then remove it from the model list and have the different view listen for the removal events.
So your section is observing the List remove event and act accordingly (either remove the element on the page or re-render it self completely).
Models and events (alternatively, routes) should be preferred to glue code in most situation.
I hope I understood your question.