I have to render a lot of divs into DOM. So, what I did is I render the first 5 elements into the DOM first after that I render every 10 divs with 300ms interval period.
The problem is when I change into display: block I need to change something in the component. So, I try to use didRender hook for that.
Code is below
didRender() {
if(this.element.offsetParent) {
this.set('myvar', true);
}
}
But it's not working perfectly. Anyone please suggest me which is the best way to do this.
_Thanks in Advance.
It's hard to guess your use case from the question but I assume that it's about rendering a very large list of items without causing performance issues. The ember ecosystem provides bulletproofen addons to do so. The most established ones I'm aware of are ember-collection and ember-large-list. I would recommend to use one of these if they suit your requirements. Reimplementing something similar will be a lot of work. Rendering new items on a timeout basis would not scale well as it doesn't take workload of browser into account.
For your concrete question: Ember does not provide a way to listen to CSS changes. You should execute custom logic at the same place as in which you are mutating the property which triggers the CSS change. If it has to be run after render, you need to deal with Ember's runloop.
Related
I am making something similar to sheet with cells where using drag and drop i can move events, that are components, around.
Since it is possible to add component from any file like this
import event from "event.vue"
let el = document.getElementById("div")
const newComponent = createApp(event)
newComponent.mount(el)
Im trying to remove it somehow aswell, but i had no luck to find solution.
i have tried to this
let element = document.getElementById("newComponent")
element.parentNode.removeChild(element)
It's kind of working, but i can't add new component to same div because there is dataset remaining 'data-v-app' and i guess its because old component was not removed. Is there a way to do this or maybe vue isn't capable?
v-if is still the "official" way of doing things here because it uses Vue's reactivity.
Modifying the DOM is not recommended since it's imperative, like jQuery: you need to tell the language how to do things, so you need to take care of finding the selector, ask it to do things on it, and loop that process in case of an event listener or alike.
VueJS is declarative, so the API is far less complex. You tell what variable is bind to what and when the variable mutate, it will react accordingly to the changes without you needing to tell step by step what to do.
When you project grows, an imperative approach like jQuery or your vanilla JS (document.getElementById) will not be efficient because you will need to describe everything that happens once you mutate a variable. If 12 things depend on a thing, you will need pretty much the double of lines of code for each of them.
While in Vue, you will make some conditions thanks to the API and it will make those changes by itself. The complexity is then greatly reduced. On top of having powerful directives + Vue devtools to help you.
Add to that the fact that if you mix both some Vue state + imperative coding, you will have the worst of 2 worlds. You will need to do funky things to kinda keep the reactivity + will still need to write declarative code.
Hence why, people are using Vue's API + template refs only when needed.
Stay away from imperative coding: jQuery, manually selecting DOM elements etc...you will have an easier time, less complexity and more performance by far.
Vue/React exist for a reason, mainly removing complexity. Use them to their full potential.
Consider this function (this is just an example):
function highlight(el) {
el.style.transition = "background-color 0.5s";
el.classList.add("highlight");
setTimeout(() => {
el.classList.remove("highlight");
setTimeout(() => {
el.style.transition = "";
}, 500);
}, 500);
}
document.getElementsByTagName("a").addEventListener("click", function () { highlight(this) });
This is "universal function" that automatically binds to every <a> on page onload, it is short (only several lines long) and I can add or remove it in seconds (the code on pages are intact).
What is the best approach to implement it in React App?
Course I knew the obvious way, with the manual add of onClick to every <a> in every component on page with setState logic, but ... it kinda sucks
I'm new to React, maybe someone can point me to the right direction
How I can implement this logic on every page(every component that has <a>) efficiently, with the ability to easy remove it if it is no longer needed?
Well, the way I see it, if you want the react way, then you would want to create a presentation component with the defined behavior and use that component instead of .
In fact, that would actually be a perfect fit for a presentational react component.
Then, if you need to implement any changes, you would do them inside that component.
You could alternatively add vanilla js to the index page but that kinda misses the whole point of react.
If you are currently developing this application then the best approach is to create a small tiny component for it. For example you can create a component HighligtedAnchor and can implement the stylistic features in it directly.
Secondly, if you directly want to handle a lot of anchors then the most appropriate place would be the root of your application that is usually App.js or you can write it down in the index.html as well if you really want to move forward with the plane js approach.
If you are looking at for something like good old jquery live you can't do that in reactjs.
The best thing you can do is to create a custom component that wraps the <a> tag. And use your custom component everywhere you would use regular <a> tag.
I am using reactJS and I would like to hide a div on smaller screen (width<768px). I have two options here:
First Method:
{
!!isSmallerScreen ?
<div className="icon">Icon</div>
: <div className="name">Name</div>
}
Description: isSmallScreen is a boolean variable. This way will not even show other div in source code.
Second Method:
<div className="icon hidden-md-up">Icon</div>
<div className="name hidden-sm-down">Name</div>
Description: I'm using twiitter bootstrap here which will add display: none on other div.
P.s. I know bootstrap is also using javascript but my question is which approach is better to use? Infact I am confused whether to use bootstrap or not as I'm already using css3 flexbox system with postcss and cssnext.
Your suggestions will be highly appreciated. Thanks for your time in advance.
In the second method, though will hide the div but still remain in the DOM.
You should use ReactJS method and not render the div is possible.
The reason being if you don't need a dont unnecessarily create it and make the DOM heavy.
Hope this helps.
Matter of preference (and minimal perfomance issue probably not worth stalling the decision making).
Personally I would go with the second method for the simple reasons that:
Easier to add transitions (fade in/out)
A little cleaner
Your vdom will stay the same - if a 3rd party, or yourself,
later decide to manipulate the dom outside react, you know
it will be consistent. (ie, selecting nth-child, etc). no surprises.
But, ultimately up to you :)
As dattebayo pointed out, it is bad practice to add unnecessary elements to the DOM. When making a decision in how something should be hidden, ask yourself a couple questions;
Will this element alternate state? Not this.state but whether or not it is hidden.
If not, then conditional rendering is the clear choice.
render() {
return (
this.props.isSmallScreen ?
<SmallScreenElement /> :
<BigScreenElement />;
);
}
If yes, will it alternate state frequently?
If yes, CSS is likely the choice for this particular element.
Otherwise stick with conditional rendering.
I hope this helps!
I am coming from a different development background with a very little jQuery and/or shieldUI knowledge. Can someone please very shortly explain how to remove/destroy shieldUI components or widgets? I don't see any special widget method therefore I assume this is done with jQuery. By destroying I mean removing everything down to (including) markup.
Also, what happenes with widget when calling hide()? I see that markup is somehow stripped down (removed), but some wrappers remain. Is it safe to call another widget setup with the same "id" ? will it overwrite? will it cause object orhpans?
As you see I am missing some very basic "how it works". I am a quick learner so please, just few basic pointers will do. Thank you :)
EDIT: found destroy widget method under "swidget()"...what is swidget?
swidget() gives you a reference to the component instance, through which you can access methods and properties, such as height, width, refresh(), destroy(), etc.
Further, with respect to the question at hand, regarding the destroy method and approach - the ideas is, that whenever you need to refresh some data on the component, you can recreate it, rather than calling a method such as rebind.
This is demonstrated in the following demo:
http://demos.shieldui.com/web/rangebar-chart/related-charts
I'm currently developing an Angular2 application and am facing an issue regarding property changes and life cycle events.
Example
Let's say that I have a simple template that is being rendered based on a property. I would like #container to stay hidden until the rendering is done, then add the visible class to it to have it show up.
<div id="container">
<p *ngFor="let value in values">
{{value}}
</p>
</div>
The problem
The problem is that .visible defines a transition, too, and the browser simply cannot handle Angular's rendering and the transition at the same time, so it quite simply stops for a moment, and then the #container just snaps in.
What I have tried
Setting a long enough time for the transition solves the problem, but I wouldn't want to change that.
I have also looked into Angular's life cycle hooks, but none of them seems to match my specific need.
Goals
I would like to be notified once Angular has finished rendering the contents of #container, so that I can add the visible class while no other work is being done, and have a smooth transition.
Any and all help is greatly appreciated.
Mark Rajcok's comment got me thinking and I have looked up different methods to take action at the next possible moment, including setTimeout, requestAnimationFrame, and finally setImmediate.
I have decided to settle for setImmediate as it seems to be the most straightforward way to defer an action to the next browser tick.
Be aware, that setImmediate is merely a proposal right now, and I am only able to use it because core-js implements it already. It might not even become a standard in the future.
https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
Note: This method is not expected to become standard, and is only implemented by recent builds of Internet Explorer and Node.js 0.10+. It meets resistance both from Gecko (Firefox) and Webkit (Google/Apple).