I would like to add onmouseover to change background color of Button.
I do not need to use a Html.Events.onMouseOver since it is a very simple task. I do not want to use other external libraries.
I create Html.attribute with
div
[
-- Html.Event.onMouserOver NoUse
Html.attribute "onmouseover" "$(this).css('background','green');"
]
[ ... ]
When I add unknown attributes to Elm. Elm addes "data-" prefix to the attributes
Therefore, when I compile the code it will be translated to Html
<div data-onmouseover="$(this).css('background','green');">...</div>
So the "onmouseover" does not work!
How could I hack the "mouseover" event in Elm?
and
Why does Elm need to block such the event?
Elm does this intentionally to avoid script injection attacks (e.g: if you take a string from the user and give it as the value here, they can't write some malicious JS and have your page execute it).
The correct solution to this is to use Html.Events.onMouseOver and Elm code (including, if you really need arbitrary JS, ports). You say you don't need to use it, but you do in Elm.
Even if you could do what you wanted, it wouldn't actually work how you want: Elm controls the DOM for the page, and may destroy and recreate elements, meaning the changes you make in JS could be lost arbitrarily.
Related
In re-frame, components will be automatically updated when a subscription they deref has an update. This is generally used for all kinds of dom elements under a single element (in general a div) somewhere under html>body.
I would like to do the same for style that lives under html>head, i.e. the style should be updated in response to subscription updates.
The spade library allows one to define
"global" style, which is easy to setup once and for all
inline style, which is generated in the react/reagent component's render function and as such can be updated based on subscriptions *)
Now I would like to define style that is not inline, yet is reactive to subscriptions. How can this be done?
My best idea currently is to try to call (reagent.dom/render [my-style] head-el) a second time (in addition to the main rendering done to that div under html>body). Not sure if that is possible or idiomatic.
*) Although only (defattrs) is strictly speaking "inline style" (i.e. something like <elem style=...>), the other option (defclass) (being rendered as <elem class=...> with a corresponding style definition under html>head) is similar in that the style is always updated together with the element, i.e. I cannot seem to update the style of the class separately from rendering the element, e.g. one subscription leads to element changes, whereas another subscription leads to style changes (only).
I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?
I am using tag-based routing with RiotJS. If the tag in the route contains an other tag, it is automatically mounted. Which is great in some cases. But there are cases when I need to pass some options to the tag being mounted, that can't be passed as tag property. I know that this.tags will contain them and I have the means to pass that parameter afterward. But I still am curious if there is a way to stop RiotJS automounting some subtags.
Sounds like you have a design error.
Remember that a tag can contain any classic JS code; you can simply write a logic that populates the tag in any time, way, shape or form. You can also hide it's content via the if condition until it is populated, while it is mounted. You can also hide it in the parent and prevent its mounting in the same manner if you so desire.
Is there an "easy" way to render a custom element in ag-grid header cell? The headercomponent interface seems like an overly cumbersome approach to a seemingly simple problem and I have not been successful with this approach. The closest I have come is to use something like:
header-cell-render.bind="myHeaderRenderer"
which is currently a function returning a string of HTML. While this "works" (though I understand it is deprecated), in the sense that the html is injected into the DOM, only primitive HTML renders. Meaning I can return something like:
<input type="checkbox" />
and it will render a checkbox, but I cannot return something like:
<my-custom-element></my-custom-element>
I can see that markup in the DOM, but the element doesn't "process", that is the Aurelia aspect of the control is not executed.
I am using the latest versions of ag-grid, ag-grid-aurelia.
Any help would be greatly appreciated.
This is currently not possible out of the box with ag-grid-aurelia.
This is because ag-grid-aurelia makes no special handling for this binding. The proper way to handle this is using replaceable parts which allows you to specify a template for Aurelia to inject and consume. ag-grid makes this a bit harder since it seems the only native tool for injecting content into the header is by passing an HTML string or an HTML element in the column configuration. This can likely be added to the ag-grid-aurelia library by using a combination of replaceable parts and the #children decorator to gain access to the aurelia-rendered header element and pass it to the column configuration.
I would like to know what these options people are using more.
1) Using v-on on normal (div, span, etc) element
<div v-on:click="myFunction" class="cursor-pointer">Click me<div>
Here, it requires to have the a class to set up the pointer cursor to indicate that is can be clicked, and also, to increase the UX.
1) Using v-on on link element
Click me
Here, doesn't need to have any classe to set up the pointer cursor. However, it requires the prevent mode to stop the link action.
So, What is the best practice, advantages and drawbacks of these two approaches?
Ultimately, it doesn't really matter. Generally speaking though, you should be writing your HTML dom in Vue.js the same way you would write it without Vue.js. If something should be a link because it's leading to another view in your application, then <a> makes sense. If you wouldn't normally use an anchor link if it was just a static HTML page, then you're probably better to be writing it with a div, span, or whatever your developer instincts decide in that case.
Always try to write your code as if someone else is going to be looking at it, in which case they are going to have some expectation of what an <a> is supposed to be doing.