I have an Ember.Component that adds items to an empty array and returns the array on submission. The problem is, if I navigate away from the Route that contains the Component (both after submitting and without submitting), and then go back to it later, the information that was last in the array is still there. I would like to to be reset every time I navigate to the route with the component.
If this were a route, I'd simply write a willTransition or deactivate method to reset my attributes. But since it's a component, it doesn't have those methods, and I can't (that I know of) access the attribute I wish to reset from the parent route. So, how can I reset this array to be empty (or reset the the entire component) every time I load this route? Thanks!
More likely than not, you're not setting the value you're using properly. Take these examples:
Ember.Component.extend({
items: []
});
Ember.Component.extend({
items: null,
init: function() {
this._super();
this.set('items', []);
}
});
In the first component, the same items array is shared by every instance of the component. So if you add an item, then create a new component, the new component still has the item (which I think is your problem).
In the second component, you can see that I set the items property in the init function. And when I set the property, I set it to a different array every time. Now, each component has their own items property.
It's hard to say without your code, but this seems like your issue.
Related
okay, it's a little hard to explain, but i'll try.
i have some components rendered in a loop from an array of cards in my vuex store
<card-base
v-for="(card, i) in cards"
:class="`dashboard-card ${card.hidden ? 'hidden' : ''}`">
note the class depending on card.hidden, which is false onload
now, every <card-base> has a button (hide), which is supposed to.. well, hide it.
the way i try to do that is:
a v-btn in the card-base component gets a #clickproperty, which calls a method.
The Problem / Question
now i want to set the hidden property of the clicked card to true.
of course
minimizeDashboardCard() {
console.log(this.hidden)
this.hidden = true
}
doesn't work, because this is not the actual object from vuex, which provides the reactive properties, but just the "element".
if i set this.hidden = true, nothing changes (except the console.log correctly showing "true" after the first click)
but how can i access the actual vuex object from this? how do i get the index which i want to edit in my array? is there a way to have the card component "say" something like:
"dispatch an action that changes ME in the actual vuex array"?
like dispatch('hideCard', this) and have it actually working?
TLDR
how can i find out the index of the clicked card in the array, or directly target it in any other way? is there a connection between a rendered element and the array in store which defines it?
i hope you understood my problem :D
thanks!
Asking for best practice or suggestion how to do it better:
I have 1 global reusable component <MainMenu> inside that component I'm doing XHR request to get menu items.
So if I place <MainMenu> in header and footer XHR will be sent 2 times.
I can also go with props to get menu items in main parent component and pass menu items to <MainMenu> like:
<MainMenu :items="items">
Bet that means I cant quickly reuse it in another project, I will need pass props to it.
And another way is to use state, thats basically same as props.
What will be best option for such use case?
If you don't want to instantiate a new component, but have your main menu in many places you can use ref="menu" which will allow you to access it's innerHTML or outerHTML. I've created an example here to which you can refer.
<div id="app">
<main-menu ref="menu" />
<div v-html="menuHTML"></div>
</div>
refs aren't reactive so if you used v-html="$refs.menu.$el.outerHTML" it wouldn't work since refs are still undefined when the component is created. In order to display it properly you would have to create a property that keeps main menu's HTML and set it in mounted hook:
data() {
return {
menuHTML: ''
}
},
mounted() {
this.menuHTML = this.$refs.menu.$el.outerHTML;
}
This lets you display the menu multiple times without creating new components but it still doesn't change the fact that it's not reactive.
In the example, menu elements are kept in items array. If the objects in items array were to be changed, those changes would be reflected in the main component, but it's clones would remain unchanged. In the example I add class "red" to items after two seconds pass.
To make it work so that changes are reflected in cloned elements you need to add a watcher that observes the changes in items array and updates menuHTML when any change is noticed:
mounted() {
this.menuHTML = this.$refs.menu.$el.outerHTML;
this.$watch(
() => {
return this.$refs.menu.items
},
(val) => {
this.menuHTML = this.$refs.menu.$el.outerHTML;
}, {
deep: true
}
)
}
You can also watch for changes in any data property with:
this.$refs.menu._data
With this you don't need to pass props to your main menu component nor implement any changes to it, but this solution still requires some additional logic to be implemented in it's parent component.
Im building an audio workstation app that will display a table of tracks containing clips. Right now I have a table reducer which returns a table object. The table object contains track objects and the track objects contain clip objects. I have a TableContainer which subscribes to the table store. My issue is I believe my app will be inefficient because it will re render the page every time a clip is added or manipulated. In reality only the particular track in which the clip resides would need to be re rendered right? How can I structure my app so not every little change re renders the entire app?
In the mapStateToProps of any component, don't select parent objects as a whole to send to the component. If possible select specific properties all the way to the leaf values. If your TableContainer's render() itself doesn't use the tracks array them make sure only the sibling properties that you do use get passed.
So instead of:
function mapStateToProps(state, props) {
return {
table: state.tables[props.tableId];
}
}
Do:
function mapStateToProps(state, props) {
let table = state.tables[props.tableId];
return {
name: table.name,
type: table.type
};
This allows React Redux to be more discerning when it comes to determining whether your component needs to be rerendered. It will see that even though the table had changed due to a clip change, neither the name, nor the type has changed.
However, since your Tablecomponent likely renders the Track components as well, you're likely not going to be able to avoid render calls. If any property anywhere up the tree gets altered, the tracks array also gets altered.
The solution in this case is to have the tracksarray not contain the entire track object but instead only a list of track IDs. You can then store the tracks alongside the tables and a change in one won't affect the other. Note that this only works if you do not go and fetch and pass the track object in the mapStateToProps of the Table component. You should make theTrack component in such a way that it accepts its ID instead of the actual object as a prop. This way the Table component is not dependent on the contents of the tracks at all.
The power of react is to re-render only what needs to be (by using the virtual DOM to make the comparison and the shouldComponentUpdate function).
I wouldn't look too much into it before it becomes a performance problem.
If it does, I would store the tracks in a separate directory and don't pass it to the app (main) component. In your Clip component's mapStateToProps function (if you use react-redux), fetch the track from the state as you get it's name from the props. This way if the track changes a lot (because of async fetching of slices for example), only the component will update.
Just started working with React, and it's been going relatively smooth up until this point.
I have a list, that contains X pre-defined items, which means that the list is always rendered with a given amount of rows.
This data is collected from a REST API, prior to the list rendering. The data contains variables relating to the list, as well as an array that contains each item within the list.
I chose the easy route, so I populate every component with a single JSON object named 'data', that contains everything necessary.
Rendering the list looks something like this:
<MyList data={data} />
Then, in the getInitialState of MyList:
dataInt: this.props.data.dataInt || 0,
dataStr: this.props.data.dataStr || '',
rows: this.props.data.rows || []
So I store my array of items (JSON) in the initial state of the list (parent), and when I choose to render the list, I first create all components (children) in an array, like this:
var toRender = [];
for(i = 0; i < this.state.rows.length; i++) {
toRender.push(<ItemRow data={this.state.rows[i]} />);
}
and then I render like this:
return (
<div className="item-container">
<table className="item-table">
{toRender}
</table>
</div>
);
The render-function of MyItem look something like this:
return (
<tr>
<td>{this.state.dataFromItem}</td>
</tr>
);
Now, let's say I want to modify the child data from within the parent, with some new data I just got from the API. Same structure, just the value of one field/column has changed:
i = indexOfItemToBeUpdated;
var newRows = this.state.rows;
newRows[i] = data; // New JSON object with same keys, different values.
this.setState({ rows: newRows }); // Doesn't trigger re-render
this.forceUpdate(); // Doesn't trigger re-render
What am I doing wrong?
At first I thought it was because I was wrapping the render function of MyItem in a , but since it renders perfectly fine on the initial render, I will assume that is an acceptable wrapper.
After some testing, it seems that the parent view is re-rendered, but not the children (which are based on the data that is updated within the parent).
JSfiddle: https://jsfiddle.net/zfenub6f/1/
I think the problem could be the your are only using getInitialState for the Row. You are setting state with the passed in props. If the children get new props, getInitialState won't get called again. I always refer back to https://facebook.github.io/react/docs/component-specs.html to see all the lifecyle events. Try using componentWillReceiveProps(object nextProps) to set the state again. If you don't actually need state in the child, remove the use of state and just use props and it probably will work.
If you're children are using State and state is not updating, what about props? does that render just fine? If the parent changes the state of the children and the children don't reflect that change those child components most likely need a unique key assigned to them which tells React that these items need to be updated when the state is updated on the parent. I ran into a similar issue where props inside the child updated to reflect the parent but the state of the child would not update. Once I added keys, the solution was resolved. For further reading on this check out this blog that initially hinted the problem to me.
http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/
There is also the official documentation from React that explains this situation.
http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
I'm facing the following situation.
I have a formpanel, within this
formpanel I have another tabpanel in
which again form elements are placed
that are part of the formpanel.
Nothing spectacular. Basically a
formpanel with some "subforms" each
contained in a tab in a tabpanel.
Now I have added code to dis/enable each subform/tab when a user clicks a button in the toolbar. But in order for validation to skip all the formelements in a disabled tab I need to also disable each form field in the tabpanel individually so it skips validation upon submit.
That's when the trouble begins. Suppose in one of the tabs/subforms i have a fieldset with another nested fieldset.
How can i fetch all xtype:field elements contained in the tab/subform?
So basically what i'm asking is how can i fetch all components that are child components of the tab, whatever their depth in the component hierarchy is? When i have a method to collect all child components it's easy to just loop over them and disabled the ones that return true from Ext.isXType('field') ... but i have no idea how to gather all subcomponents when i have a reference to it's containing component.
This way:
var componentsArray = container.findByType('component');
Or even this
var componentsArray = container.findBy(function(c) {return true});
(should be even faster)
It should be noted however, than this will not return components within tbar, bbar, buttons properties of Ext.Panel descendands.
Edit Use findByType from Mchl's answer. I got mislead by an error in the Ext documentation.
You can use Ext.Container.prototype.cascade
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container
heirarchy from this component (called
first), calling the specified function
with each component. The scope (this)
of function call will be the scope
provided or the current component. The
arguments to the function will be the
args provided or the current
component. If the function returns
false at any point, the cascade is
stopped on that branch.
I used it this way while testing this answer:
var children = [];
this.cascade(function(cmp) {
if (cmp.isXType('field')) {
children.push(cmp)
}
});
children contained 446 instances of field at all different levels.