I'm trying to compare two different Strings by HBS.
The function look like this:
hbs.registerHelper('if_equal', function(a, b, opts) {
if (a == b) {
return opts.fn(this)
} else {
return opts.inverse(this)
}
});
Works great!
But the problem is in this lines:
{{#each info.categories}}
<li>{{this.title}}</li>
{{!-- {{#if_equal this.title "מלגזות"}}
{{/if_equal}} --}}
{{/each}}
s you can see I'm trying check if two string are equal inside the loop.
The problem is how I can back to {{info}} one.
To the global object inside the loop.
And than make loop into the object.
I'm not sure I understand your question, but if you want to access info in the loop you can do it by #root.info
https://handlebarsjs.com/reference.html#data-root
Related
I want to see if the text contained in a span which itself is contained in a div contains certain text.
This is the HTML:
<div class="funds">
<span>banking</span>
<span class="m-l-sm">
<b>EUR 1,000</b>
</span><!--anchor-->
</div>
I want to check if <span class="m-l-sm"> contains 'EUR'.
One way I tried to do this (among several others) is:
var checkFunds = element(by.id("m-l-sm"));
if (checkFunds.getText().toContain('EUR'&'GBP')) {
//do something
}
I get an error saying .toContain() is not a function.
I'm at a bit of a loss as to how to proceed.
.toContain() is a Jasmine matcher's method. It is usually used for assertions, e.g.:
expect(checkFunds.getText()).toContain('EUR');
Since it looks like you actually want to do something if you see a substring in a string - you need to get to the actual text of the element, which means you need to resolve the promise returned by .getText(). Then, you can check if substring EUR is inside the text:
var checkFunds = element(by.id("m-l-sm"));
checkFunds.getText().then(function (text) {
if (text.indexOf('EUR') >= 0) {
// do something
}
});
http://jsfiddle.net/Lc5gdvge/
In the fiddle above, I've showcased how text(), returns elements text and childrens' as well. How do I avoid this and only make it return "outerdiv"?
NOTE: Just click the blue container to call function.
$(document).ready(function() {
$('.outerdiv').click(function() {
var htmlstring = $(this).text();
alert(htmlstring);
})
});
NOTE 2: This has to be without the use of ID selector.
To get the text of only the .outerDiv and not the children elements, use the following code :
$(this).clone().children().remove().end().text();
What this does is, it clones the element, removes all the children tags, and goes back to the selected tag and gets the text.
The final code should look like :
$(document).ready(function () {
$('.outerdiv').click(function () {
var htmlstring = $(this).clone().children().remove().end().text();
alert(htmlstring);
});
});
I want to get the element through javascript based on attribute value, as per the example I want to get element through attribute "doc-cid" and the value of "doc-cid" is dynamic.
<p align="center" style="font-family:times;" doc-cid="11303">
<font size="2" doc-cid="11304">55</font></p>
<p id="demo">Click the button to change the text of a list item.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var list = document.getElementsByTagName("doc-cid=\"11303\"")
alert(list.getAttribute("doc-cid"));
}
</script>
I'll start with a few pointers about your above code, and follow through with a solution.
POINTERS
doc-cid is not a "TagName", it is a custom attribute. hence, your function trying to getElementsByTagName will always fail for "doc-cid".
doc-cid can by dynamic (or not) it doesn't matter. A lookup function will always get the CURRENT DOM value of your element (unless you specifically make it do otherwise).
I suggest you use the new "data-*" attribute in html, it keeps your markup valid (if that is important to you). The use would be as follows:
your content
SOLUTION
function getElementByAttribute (attribute, value, start) {
var start = start || document,
cache, //store found element
i;
function lookup(start) {
// if element has been found and cached, stop
if (cache) {
return;
} else if (start.getAttribute(attribute) === value) { // check if current element is the one we're looking for
cache = start;
return;
} else if (start.childElementCount > 0) { // if the current element has children, loop through those
lookup(start.children[0]);
} else if (start.nextElementSibling) { // if the current element has a sibling, check it
lookup(start.nextElementSibling);
} else {
return;
}
}
lookup(start);
return cache;
}
You simply give the function the attribute name you are looking up, the value you need to match and the starting point of the lookup (if no starting point is specified it'll start at the very beginning of your page (much slower).
Below is an example for your markup:
// you have no easy to get starting point, so we'll traverse the DOM
getElementByAttribute('doc-cid', '11303');
If you want to start at a better node, you can add a wrapper div element and give it id="wrapper" then you could call the function as follows:
var start = document.getElementById('wrapper');
getElementByAttribute('doc-cid', '11303', start);
Hope this helps.
I've got typeahead working just fine, but I am too inexperienced with the Javascript to understand how to turn the typed results into a link.
<input type="text"
class="span3"
data-provide="typeahead"
placeholder="City Search:"
data-items="6"
autocomplete="off"
data-source=["Neuchatel","Moutier"]">
So, I really just want to know how to turn the strings from data-source into links to other pages. Hopefully this is fairly simple.
thanks!
You can turn the strings into links easily..
<input type="text" data-provide="typeahead" data-source="["/foo.html","http://www.google.com","/about.html"]">
Are you also looking to take the link from the input and then navigate to the selected page?
EDIT: Navigate to item selected in typeahead..
In this case you'd define an object map that contain keys (label) and values (url) like..
var data = {
"login":"/login",
"home":"/",
"user":"/user",
"tags":"/tags",
"google":"http://google.com"
};
Then you'd initiate the typeahead. The source and updater functions would be defined to handle 1) creating the typeahead data source array from the map object, and 2) navigate to the appropriate url when an item is selected..
$('.typeahead').typeahead({
minLength:2,
updater: function (item) {
/* navigate to the selected item */
window.location.href = data[item];
},
source: function (typeahead, query) {
var links=[];
for (var name in data){
links.push(name);
}
return links;
}
});
Demo on Bootply
I have a bunch of divs like this:
<div class="bear"></div>
<div class="dog"></div>
How do I get a nodelist that includes all divs with class of bear and dog? I tried:
Y.get(".bear .dog").each(function() {
});
But it returns null. Anyone have any suggestions? Thanks!
Based on how CSS selectors work, it should be .bear, .dog
Along with VoteyDisciple's answer, you should change the get to all.
For example:
YUI().use('node',function(Y) {
console.log(Y.get(".bear, .dog").size()); // prints out 1
console.log(Y.all(".bear, .dog").size()); // prints out 2
});
YUI().use('node',function(Y) {
console.log(Y.get(".bear + .dog").size());
console.log(Y.all(".bear + .dog").size());
});
This could be done to select a node which has both bear and dog as classes.