I've got a map of city names => distance-from-origin.
I'd like to use a partial with this map, and create something like so:
<ul>
<li>city1: distance1</li>
<li>city2: distance2</li>
<li>city3: distance3</li>
</ul>
What is the canonical way to do this with StringTemplate?
Thanks.
<ul>
$amap.keys:{k | <li>$k$: $amap.(k)$</li>}$
</ul>
Related
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 have a simple repeat.for:
<li repeat.for="item of items">${item}</li>
Currently I'm using: ${$parent.items.indexOf(item)}.
Is there a shorthand, something like {{$index}} in angular?
There is. Write this:
<li repeat.for="item of items">${$index} - ${item}</li>
My ActionLink reads as follows
#Html.ActionLink(image.FileName,image.FileLoc+"/"+image.FileName)
The image.FileLoc value is /content/3f1d6985-250d-45ff-abe6-dcab86437677
and image.FileName is mty2gm34.jpg
The corresponding href looks like this
<a href="/Images/content/3f1d6985-250d-45ff-abe6-dcab86437677/mty2gm34.jpg">
mty2gm34.jpg
</a>
Instead, what I would the href to look like is:
<a href="/content/3f1d6985-250d-45ff-abe6-dcab86437677/mty2gm34.jpg">
mty2gm34.jpg
</a>
Is there a simple way to do this?
Since you're linking a static resource instead of a controller action I'd forget about using HtmlHelper.ActionLink() and use UrlHelper.Content().
#image.FileName
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>
}
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");