Setting other attributes in loop rivets js - javascript

I have a loop like this in revets.js:
<ul>
<li rv-each-article="main_content.latest_articles">
<p rv-on-click="controller.onArticleClick" rv-text="article.title"
data-url="article.url"></p>
</li>
</ul>
Unfortunately article.url is not being parsed by revets.js so the when logging the value to the console it just prints article.url while I expect it to get the actual value from the data object and print that out.
How do I fix this?

Just prefix data-url with rv- like:
<ul>
<li rv-each-article="main_content.latest_articles">
<p rv-on-click="controller.onArticleClick" rv-text="article.title"
rv-data-url="article.url"></p>
</li>
</ul>

Related

Dynamic Render Formula in XPages Menu

I created a computed Menu in XPages with rendered rules based on users roles.
The values of my menu are calculated from a view in a computed field.
This is my menu code:
<div id='cssmenu'>
<ul><li class='active has-sub'>
<a href='#'>Title1</a>
<ul>
<xp:text escape="true" disableTheme="true" contentType="html">
<xp:this.value>
<![CDATA[#{javascript:var arr= #DbColumn(#DbName(), "vwMenu", 4);
arr.join("");}]]>
</xp:this.value>
</xp:text>
</ul>
</li>
</ul>
</div>
The value of an element from my array give for example this code :
<li class='has-sub'>
<a href=https://mylink.com>Link1</a>
<xp:panel>
<xp:this.rendered>
<![CDATA[${javascript:context.getUser().getRoles().contains('[USER1]')}]]>
</xp:this.rendered>
<ul>
<li><a href=https://MyPage.com>Link2</a></li>
</ul>
</xp:panel>
</li>
The menu appears fine so the html code is ok.But the xml part concerning the visibilty on link2 does not. link 2 is not visible, whatever the role of the connected user. I think it's a problem that happened where i use xml code into javascript code.
Maybe because The content type of my computed field is html and my code for rendering is in xml.
You forgot to enclose the href attributes with an apostrophe ':
<li class='has-sub'>
<a href='https://mylink.com'>Link1</a>
<xp:panel>
<xp:this.rendered>
<![CDATA[${javascript:context.getUser().getRoles().contains('[USER1]')}]]>
</xp:this.rendered>
<ul>
<li>
<a href='https://MyPage.com'>Link2</a>
</li>
</ul>
</xp:panel>
</li>
Method .contains() is case-sensitive. Make sure the role set in ACL is exactly [USER1]. Your rendered code works fine for me.
You might add some prints to rendered code for test purposes:
<xp:this.rendered>
<![CDATA[${javascript:
print(context.getUser());
print(context.getUser().getRoles());
context.getUser().getRoles().contains('[USER1]')}]]>
</xp:this.rendered>
You can see at server console then what really happens in your code:
The href value has to be surrounded by quotation marks or single quotation marks. Otherwise you would get a syntax error and changes you did on XPage wouldn't take effect.
Update
As you mentioned in your comments, you put the HTML and included JavaScript code into a computed field. This doesn't work because the content is sent straight to browser and this way included JavaScript code does not get executed on server.
Instead, use a repeat control to create the menu items:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<ul>
<li>
Link1
<xp:panel>
<xp:this.rendered>
<![CDATA[${javascript:
context.getUser().getRoles().contains('[USER1]')}]]>
</xp:this.rendered>
<ul>
<xp:repeat
var="link">
<xp:this.value><![CDATA[#{javascript:
["https://MyPage.com", "https://www.google.com"]
}]]></xp:this.value>
<li>
<a href="#{link}">
<xp:text escape="true"
value="#{javascript:'Link to ' + link}" />
</a>
</li>
</xp:repeat>
</ul>
</xp:panel>
</li>
</ul>
</xp:view>

in angularjs how do i get $index for each LI within different div

here is my code snippet.
<div>nike</div>
<ul>
<li id="cat-{{$index}}">csj</li>
<li id="cat-{{$index}}">appliance</li>
</ul>
<div>hulk</div>
<ul>
<li id="cat-{{$index}}">toys</li>
<li id="cat-{{$index}}">t-shirt</li>
</ul>
If i have to put angular snippet it would look like
<ul>
<li ng-repeat="name in category" id="cat-{{$index}}"></li>
</ul> //output : csj, appliances
<ul>
<li ng-repeat="desc in data" id="cat-{{$index}}"></li> //output: toys, t-shirt
</ul>
When I am trying to access "toys" by saying cat-2. It is returning me an error. When I inspected in chrome. it is giving ids as
csj - cat-0
appliances - cat-1
toys - cat-0
t-shirt - cat-1
I want it to be in ascending order meaning toys should have id cat-2 and t-shirt should have id cat-3.
Any help would be great. Is it even possible?
$index is part of the ng-repeat scope. If you do a ng-repeat you could use it like this:
<ul>
<li ng-repeat="myLi in myArray" id="cat-{{$index}}"></li>
</ul>

Add html in *ng-for loop in angular 2

I want to add html code from a variable inside a for loop in angular 2:
<ul>
<li *ng-for="#c of myHtmlItems">
{{c.myHtml}}
</li>
</ul>
The html is only added as a string
Update to angular2.0.0
<ul>
<li *ngFor="let c of myHtmlItems" [innerHTML]='c.myHtml'></li>
</ul>
*ng-for has been replaced with *ngFor
# has been replaced with let
inner-html with innerHTML
(better to use property binding like this [innerHTML]='c.myHtml' instead of inner-html="{{c.myHtml}})
you could do:
<ul>
<li *ng-for="#c of myHtmlItems" inner-html="{{c.myHtml}}></li>
</ul>
instead of ng-for, give a try with ng-repeat. As mostly ng-repeat is useful in very different ways
<ul>
<li ng-repeat="element in myHtmlItems">
{{element}}
</li>
</ul>

Angularjs json ng-repeat displays items properties only with manual iterator

Im getting json from some web service and displaying it with ng-repeat but i can't seem to display item properties.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item}}</p>
</li>
</ul>
This works and will display all json
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item.name}}</p>
</li>
</ul>
This doesnt work.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item[0].name}}</p>
</li>
</ul>
This works but will only display 1 item.
I just started working with angular and i feel im missing something becouse of it, if needed ill try to post a jfiddle of a sample.
UPDATE
im tring to get twitch.tv stream info
https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#get-streams
raw json from 2 streams, what i get from the first example
http://pastebin.com/bQLqu9BR
UPDATE 2
my code
http://plnkr.co/edit/3eOZ598zt2hkrJcsOLhP
Hmmm... I seem to be able to work with the sample data you provided.
See the following:
http://plnkr.co/edit/M3TQ4qI1DJPtgv6jCQLy?p=preview
Snippet:
<ul>
<li ng-repeat="item in srcData">
<p ng-bind="item.game"></p>
<p ng-bind="item.channel.display_name"></p>
<p ng-bind="item.channel.url"></p>
</li>
</ul>
You don't need to include an index for each item to display its properties, every item knows its index number and you can access it using the $index variable.
Check this out:
http://plnkr.co/edit/ECyyFYVupVG7mKqwsGaB
<ul>
<li ng-repeat="item in itemList">
{{$index}}
<p>
Game: {{item.game}}
</p>
<p>
Channel Name: {{item.channel.name}}
</p>
</li>
</ul>

Create a URL based on Selection in <ul> <li>

I am trying to build url based on a user selection from a multilevel list.
The user selects four options which in turn will create the url required for retrieval of a document.
Example:
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
So I would select the Report Name > Year > Month and this would build a url which equals the path to the file.
e.g. http://www.example.com/Report1/2010/Jan
Does anyone perhaps have any ideas as to how this can be done.
Here is an example of $(this) being used to get the value of what was clicked. I'm using JQuery in this example.
Had to add an id to the year value. You don't HAVE to do it this way, you can use the jquery selectors to get the proper value. It is just a lot easier.
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li id='2010'>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
The javascript looks like this:
$('#2010 li').click(function()
{
var year=$(this).parent().parent().attr('id');
var month=$(this).text();
console.log(month+' '+year);
//this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
});
Ok there are several options, I would suggest using javascript.
So, basically, you would check if an <li> was clicked and if it was, then add a certain value to string, the redirect the page using that built string. Here is an example of what I mean:
http://jsfiddle.net/35XDn/4/

Categories

Resources