Im new to React, and I have my first question about it.
I have been told that what comes inside the "return" (The red line in the image) is HTML and if I want to use JS I need to open { } and put the code inside it (Small white arrows in the image) so React "understand" its JS.
So again, only JS code will be inside { } How come the <li></li> (blue line in the image) doesnt need to be surrounded by `` and the p.name need to be $p.name ? Cause its inside the {} and anything inside it should be JS!
So if I do need to put HTML inside { } is should be with string interpolation!
What you write React is not HTML itself, it is called JSX, which is a kind of HTML with some differences.
That's why you put it at the begging of your example className:
<div className="ProductList">
instead of normal use normal class HTML
<div class="myClass">`
So, technically, what you are writing all the time in JavaScript.
You can read more in React JSX
According to React document regarding JSX syntax:
Any JavaScript expression will work between curly braces { }
This also includes JSX tag, which is internally a syntactic sugar for a function that create elements.
Since map() returns a shadow copy of the array, the result of the following:
{["1", "2", "3"].map(item => <li key={item}>{`Product ${item}`}</li>)}
Returns something close to this, except that map() also requires adding unique key attributes to the output elements:
{[<li>Product 1</li>, <li>Product 2</li>, <li>Product 3</li>]}
And that is rendered close to as follows:
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
More about rendering lists in React: documents
Related
I am trying to populate a textInput spacer with a text file's contents. The said text file needs to be selected via a hover menu, which I am using for the first time. The interface is easy enough to set up, but the mechanics of populating the text box are trickier than I expected. I am probably missing something really simple because I am a rookie in this area.
Here is an example:-
<li><a>Jul 15, 2018</a></li>
<script>
var currentBaseValue;
$("#selectedBaseRelease").load("location_of_some_file", function() {
loadbaseText(currentBaseValue);
});
</script>
A bigger picture is here, which includes the loadbaseText function, among other things:-
https://jsfiddle.net/kehliah/z6y87x35/10/
Notice in the JS Fiddle example how two menu options under SP1-T simply point to remote web pages of pure text. (This is for example purposes only.) If I can get the two different loads to work, I can make appropriate edits on my end to point to files within my company's firewall/domain.
What am I missing? How can I get the contents of either SP1-T option to appear in the text box?
Looking at your jsfiddle, I could not find where you were actually calling any of your functions when clicking the <li> elements, this is made harder by the fact that all of your CSS, HTML, and JQuery are all together.
Anyway, here is one way of doing what you requested using JQuery. At the moment, which ever <li> element you click on replaces the textarea text with the text of that <li> element.
function populateTextArea(element) {
$("#baseText").text($(element).text());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a onclick="populateTextArea(this);">Aug 30, 2018</a></li>
<li><a onclick="populateTextArea(this);">Jul 15, 2018</a></li>
</ul>
<textarea id="baseText"></textarea>
I am currently using anchor tags and have implemented smooth scrolling on 5 links. This currently works perfectly. However, I would now like to add the ability to use the arrow keys to navigate through these same anchor tags.
I can only fumble through javascript and jquery, so I'm pretty confused when it comes to that stuff.
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
So basically, I want a user to hit the down arrow and them to be taken to the next section, depending on where they are on the page. If they are on section 2, take them to three. If they hit up again, they would be taken back to two and so forth. Make sense?
Checkout Mousetrap. It's a nifty little library that makes binding keys pretty easy. There are a few good examples on the site as well.
Perhaps something like this would suffice:
Mousetrap.bind('up', function() {
your_up_function();
});
Mousetrap.bind('down', function() {
your_down_function();
});
I'm currently creating a footer with Save/Cancel/Delete, depending on where the user is. Now I'm trying to not show/render the Delete button when it's not required. How to achieve this using a variable from KnockoutJS (observable) as the operator in a ternary?
Current code doesn't work properly but below anyway.
<li>#(Global.ButtonCancel)</li>
<script>
var button = "<li>#(Global.ButtonDelete)</li>";
isEditingProduct ? button : false;
</script>
<li>#(Global.ButtonSave)</li>
The error i keep getting is that "isEditingProduct" is undefined. When i use it inline (outside the script), for a straight <li data-bind="isEditingProduct" ></li> with the other stuff inside it works. It hides the button, but leaves me with a gaping hole in the footer. Which is why I'm trying to get around it by not loading it in for rendering at all if it's not yet needed.
Any help would be appreciated.
Taking a look at your code, I'm confused.
No idea why you feel you need a ternary to hide/unhide elements.
Use the visible: binding.
<li data-bind="visible: isEditingProduct"></li>
isEditingProduct needs to be a property on your view model.
You could use visible or if binding:
<li>#(Global.ButtonCancel)</li>
<li>#(Global.ButtonDelete)</li>
<li>#(Global.ButtonSave)</li>
Read documentation about these bindings:
http://knockoutjs.com/documentation/if-binding.html
http://knockoutjs.com/documentation/visible-binding.html
Not sure where you "isEditingProduct" is defined but you can't simply reference a part of your View Model in JavaScript without fully qualifying it. Instead try:
myViewModel.isEditingProducts = true;
Also, the location of your script block is confusing. It shouldn't be in-lined between <li /> tags. The script will not necessarily execute at that time (as the browser is parsing your markup).
I have multiple links, each embedded in its own list-item, like so:
<ul id="topLinks">
<li>Link 1</li>
...
<li>Link 4</li>
</ul>
What I would like done is, when the user is hovering over the link, dashes are added to the link text. For example, when the mouse rolls over "Link 1", it turns to "-Link 1-", and goes back to normal when the cursor is not over that link anymore - leaving the other links alone (until user rolls its cursor over each respective link).
I've tried writing a few scripts of my own for it, but Im still pretty new to JavaScript, so Im kind of lost. Oh, by the way, I apologize for not having a live example, Im working on my LocalHost at the moment...
In fact, you can use :after and :before CSS selectors, in combination with :hover: http://jsfiddle.net/pimvdb/p9Qfu/. It is more straightforward and faster than doing it in JavaScript.
li:hover:before {
content: "-";
}
li:hover:after {
content: "-";
}
If you're willing to do jQuery then this would work: http://jsfiddle.net/MrrZs/ If not, I can try something else for you.
I have a simple tree view that is loading child nodes through a ajah call to the server. I'm going to abbreviate the html but you should get the gist.
<li id=1>Node 1</li>
When this is expanded (by being clicked on) there will be a bunch of sub nodes loaded through a ajah call (they are not on the page to begin with):
<ul>
<li id=1_1>Node 1_1</li>
<li id=1_2>Node 1_2</li>
<li id=1_3>Node 1_3</li>
</ul>
and then again for Node 1_1
<ul>
<li id=1_1_1>Node 1_1_1</li>
<li id=1_1_2>Node 1_1_2</li>
<li id=1_1_3>Node 1_1_3</li>
</ul>
Now that we got all that on the screen I want to have something like so (this is simplified to try and remain clear). I am using jQuery:
$('li').live('click', function() {
var path = $('li').attr('id');
var parent = '#1_1'; // this would be calculated, assuming 1_1_ node was clicked
var grandParent = '#1'; // against calculated
var crap = $(parent).text(); // should be 'Node 1_1'
var darn = $(grandParent).text(); // should be 'Node 1'
});
Both crap and darn are not getting any values. I think this is because they aren't on the page and need a something like a "live" selector, similar to jquery's "live" events.
I think this answer on this question might be what I want, but not sure if it is the most efficient...so I posted a new question. I will try doing this and see what I come up with and post results.
jQuery Ajax - Get Elements Inner Text
The issue though is I will have potentially 10,000 nodes visible on the screen at once so reloading and then filtering just seems slower than a direct getById type of selection.
I just tried the code as plain Html it works perfectly. As you mentioned if some of the "li" elements are not on the page, it will not fire for them.
So using jQuery's "Live query" Plugin you will not need to use the jQuery Click event handler again and again, also no need to filter or reload either.
http://plugins.jquery.com/project/livequery/