Hi I have problem joining two lists together before applying domConstruct.toDom.
I understand that it can be done that way ie:,
require(["dojo/text!, myListHtml.html", "dojo/domReady!"],
function(myListHtml){
var list = domConstruct.toDom(myListHtml);
});
However, i would like to know how two lists should be coded ie:-
require(["dojo/domReady!"], function(){
var list = domConstruct.toDom
('<ol>\
<li class="odd">\
<div class="bold">\
<a class="odd">Odd</a>\
</div>\
</li>\
<li class="even">\
<div class="italic">\
<a class="even">Even</a>\
</div>\
</li>\
</ol>\
<ol id="list2">\
<li class="odd">Odd</li>\
</ol>');
Please advise. Thanks in advance
Clement
Why are you trying to join the two lists? domConstruct.toDom() returns a single domNode, but what you are trying above would be two domNodes.
If you really want to "combine" them, you can nest them inside another domNode, like this:
var lists = domConstruct.toDom(
'<div>\
<ol>\
<li class="odd">\
...
</ol>\
<ol id="list2">\
<li class="odd">Odd</li>\
</ol>\
</div>');
If you want to "combine" them on the page, consider creating them separately and adding them to the page using domConstruct.place(), like this:
domConstruct.place('<ol>\
<li class="odd">\
...
</ol>', "idOfWhateverYouWantToContainIt");
domConstruct.place('<ol id="list2">\
...
</ol>', "idOfWhateverYouWantToContainIt");
Related
I'm using RiotJS v3.9
I've written a custom tag that accepts a few opts. The problem is that the markup it generates includes all of those opts on the outermost element, in addition to the interior tags where I explicitly deposit them. I do not want any opts to appear on the top element unless I make that happen.
In this case, my custom tag display a list of items. One of the opts it accepts is the value for a specific data- attribute on each list item. So, I want data-something={opts.itemSomething} to appear on each list item, but I do not want that to appear on the wrapper.
// my-list.tag
<my-list>
<ul data-something={ opts.something }>
<li
each={ item in opts.items }
data-something={ parent.opts.itemSomething }
>
{ item }
</li>
</ul>
</my-list>
Using it:
<my-app>
<my-list
something="parent-value"
item-something="child-value"
items={['one', 'two', 'three']}
/>
</my-app>
What it emits into the page:
<my-list something="parent-value" item-something="child-value">
<ul data-something="parent-value">
<li data-something="child-value"> one </li>
<li data-something="child-value"> two </li>
<li data-something="child-value"> three </li>
</ul>
</my-list>
I don't want the emitted <my-list> tag to have either the parent-value or the child-value on it. I only want those attributes to appear on the <ul> and <li>, like I coded it.
// bad output
<my-list something="parent-value" item-something="child-value">
// good output
<my-list>
Is this possible?
Also, I know from working with React that I'm likely to encounter future cases where I want some of the opts to appear on the wrapper while hiding others. So, ideally I'd like to know how to control this behavior on a per-opt basis.
you can remove the unwanted attributes in both the "updated" and "mount" event.
check this demo
However I strongly suggest you to switch to riot#5!!
I'm trying to implement the condition provided in the code. My last attempt was like in the one in the code.
<ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
<li v-if="{{propertyName}} == 'IndustryIdentifiers'">Data not available</li>
<li v-else>{{value}}</li>
</ul>
How can the following be implemented:
v-if="{{propertyName}} == 'IndustryIdentifiers'"
The {{ }} syntax is used to wrap a JavaScript expression that should be output as text. It isn't necessary to use the braces to access data in other contexts. In the case of a v-if the attribute value is already an expression and there's no need to include any special characters to pull in data values.
So it'd be just v-if="propertyName === 'IndustryIdentifiers'":
<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
<li v-if="propertyName === 'IndustryIdentifiers'">Data not available</li>
<li v-else>{{ value }}</li>
</ul>
Here I'm assuming that item[this.index] is an object rather than an array, which is implied by the way you've written your loop.
You could also write it like this:
<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
<li>{{ propertyName === 'IndustryIdentifiers' ? 'Data not available' : value }}</li>
</ul>
You should also be able to remove the this. from the index unless it's also declared locally.
I also wonder whether you're intentionally creating a separate list for each value, with each list only containing a single item. Difficult to know exactly what you're trying to achieve but I would guess that you want the loop inside the <ul> rather than on the <ul>. If you only have a single <li> (as in my second example) then you could move the v-for onto the <li>. If you want to stick to having two <li> elements with v-if/v-else then you'll need to wrap them in a <template> tag to hold the v-for.
I am learning angular2 using ng-book2 book and I was just playing around Built in directives.
I was reading about ngSwitch and I stumbled upon this feature where we can write multiple ngSwitchWhen with same conditions like following code:
<ul [ngSwitch]="choice">
<li *ngSwitchWhen="1">First choice</li>
<li *ngSwitchWhen="2">Second choice</li>
<li *ngSwitchWhen="3">Third choice</li>
<li *ngSwitchWhen="4">Fourth choice</li>
<li *ngSwitchWhen="2">Second choice, again</li>
<li *ngSwitchDefault>Default choice</li>
</ul>
which will output following result:
Second Choice
Second choice, again
I wrote code as below:
<div [ngSwitch]="myVar">
<div *ngSwitchWhen="myVar==1">My Var is 1</div>
<div *ngSwitchWhen="myVar==2">My Var is 2</div>
<div *ngSwitchWhen="myVar==3">My Var is 3</div>
<div *ngSwitchWhen="myVar==3">Special feature of ng Swtich</div>
<div *ngSwitchDefault>My Var is {{myVar}}</div>
</div>
which does not print output with same conditions.
I thought my code was proper but when I saw *ngSwitchWhen="myVar==3"
I found out my mistake.
But strangely it works properly except for repeated conditions
Is there any difference between these two conditions?
*ngSwitchWhen="2"
*ngSwitchWhen="myVar==3"
Which one to use?
ngSwitchWhen="2"
This expression checks the value of switchcase against the variable myVar(myVar=="6")
ngSwitchWhen="myVar==3"
Whereas this expression evaluates to myVar==(myVar==2) the value inside the parantheses return 1 if myVar is 2 and 0 if not
Everyone, I have a rather weird problem.
In an HMTL unordened list I have several list elements with onClick events, and they all call the same function.
<ul>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">1</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">2</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">3</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">4</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">5</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">6</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">7</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">8</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">9</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">0</li>
</ul>
This is the Javascript function:
function show(ID){
show = document.getElementById(ID);
notShow = document.getElementsByClassName("visible")[0];
if (typeof notShow !== "undefined"){
notShow.classList.toggle("hidden");
notShow.classList.toggle("visible");
}
show.classList.toggle("hidden");
show.classList.toggle("visible");
}
for some unknown reason, the function works fine when I click one of the <li> elements first, but the second time I do that I get an error:
Uncaught TypeError: object is not a function ACNL.php:31
I think the error is not inside the javaScript function, but in the HTML-element that calls the function.
Any help would be appreciated!
I see a few problems here. In no particular order:
It would probably be safest to change the inner variable name show to something else since your function is also called show(...).
Declare variables with the var keyword to avoid populating the top namespace.
You're retrieving DOM elements by ID, but none of your DOM elements (in the above example) have ID attributes. You'll want to add them to your li items at least, e.g. id="1"
If these elements don't have visible to start off with, you'll add both visible and hidden when you "toggle".
If you toggle visible and hidden on the li items, then notShow = document.getElementsByClassName("visible")[0]; should probably change, as you will be retrieving the li items once they have visible in them. Try using other class names or element types.
Here is a jsFiddle to get you started (ignore the window.show definition that's specific to jsFiddle).
This seems like it should be really easy, but I cannot get this to work.
I have a collection of strings in my view model that's being outputted as list items :
<ul class="dropdown-menu" id="genreDropDown">
#foreach (string subject in Model.SuggestSubjects)
{
<li id="listItem'#subject'"><a onclick="LoadSuggestTitles_BySubject('#subject');">#subject</a></li>
}
</ul>
When the page renders I'm seeing the id of the list items are being formatted as :
<li id="listItem'Mystery'">
My question :
Is there any way I can format the ID without the single quotes, so Razor can still pick up the value and append it to id?
Ultimately I'd like for it to read <li id="listItemMystery">.
Replace:
<li id="listItem'#subject'">
With:
<li id="listItem#(subject)">
Try this:
#foreach (string subject in Model.SuggestSubjects)
{
var id = "listItem" + #subject;
<li id="#id"><a onclick="LoadSuggestTitles_BySubject('#subject');">#subject</a></li>
}