I have a fairly simple layout required.
<ul>
<li>Link</li>
</li>Link</li>
</ul
<ul>
<li>Link</link>
<li>Link</link>
</ul>
However I get:
<ul>
<li>Link</li>
</ul>
<ul>
</li>Link</li>
</ul
<ul>
<li>Link</link>
</ul>
<ul>
<li>Link</link>
</ul>
Im sorry I dont have the XSL to hand, network issues but thought id ask anyway with a brief explanation:
Essentially my xsl =
<for each select=x>
<ul>
<li>select=link</li>
</ul>
</for each>
Should I be doing:
<ul>
<for each select=x>
<li>select=link</li>
</for each>
</ul>
I also want to get a header for the list that is a result of grouping similar items,
<h3>select=header</h3>
<ul>
<for each select=x>
<li>select=link</li>
</for each>
</ul>
Am i babbling...
Should I be doing:
Yes, although you ideally also want an if around the whole thing so that in the event you don't have any items at all, you emit nothing, not even a ul with no items.
Am i babbling...
Yes :)
Related
I have html content like this
<div class='.desc_html_aff'>
sdsdfdfdgdsg
<ul class="pi_ul">
<li>abc</li>
<li>def </li>
<li>ererefe </li>
</ul>
wfwfwsfgdhfhfhdf
dgdfhfj
</div>
I woudl like te replace content of <ul> by '!!'
here jquery which dont work
var desc_aff=$('.desc_html_aff').html().replace(/<ul(.*?)>(.*?)<\/ul>/gi,"!!")
I really cannot see what I'm doing wrong, any ideas?
Please help, thanks
The HTML string that you want to transform contains newline characters, which aren't matched by .*?. You can use [\s\S]*? instead:
var desc_aff=$('.desc_html_aff').html().replace(/<ul(.*?)>([\s\S]*?)<\/ul>/gi,"!!");
console.log(desc_aff);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='desc_html_aff'>
sdsdfdfdgdsg
<ul class="pi_ul">
<li>abc</li>
<li>def </li>
<li>ererefe </li>
</ul>
wfwfwsfgdhfhfhdf
dgdfhfj
</div>
This is my menu template - using the DDRMenu template style
<ul class="nav" id="side-menu">
[*>NODE]
</ul>
[>NODE]
<li class="[?SELECTED]active[/?]">
[?NODE]
[=TEXT]
[?ELSE]
</span>
[/?]
[?NODE]
<ul class="nav nav-****second****-level">
[*>NODE]
</ul>
[/?]
[/>]
How do I replace the ****second**** with the correct ordinal depending on how many levels down the menu goes
I'm using below logic to show multi level menu in one project.
<ul>
[*>NODE]
</ul>
[>NODE]
<li id="languages-box-holder">
[?ENABLED]
[=TEXT]
[?ELSE]
<span>[=TEXT]</span>
[/?]
[?NODE]
<ul class="languages-box popup-box cream-bg">
<li class="arrow-top"><span class="shadow cream-bg"></span></li>
<li class="focusor-top"></li>
[*>NODE]
</ul>
[/?]
</li>
[/>]
I've a template whose model contains two different sets of array elements. I've to list them with a check box, so that user can select multiple items from both the lists. I've to collect all the items.
I started as follows
<script type="text/x-handlebars" data-template-name="temp">
<p>List 1</p>
<ul>
{{#each list1}}
<li>
{{input type="checkbox"}}
{{name}}
</li>
{{/each}}
</ul>
<p>List 2</p>
<ul>
{{#each list2}}
<li>
{{input type="checkbox"}}
{{name}}
</li>
{{/each}}
</ul>
</script>
I thought to have controllers for the two lists separately. But not sure how to get the list together. The place where I've the total control could be "TempController", but not sure how to get the checked property of each item in the two different lists.
I hope I've explained my functionality. Hope there is a solution or work around for this.
Thanks.
I'd just like to ask if this coding method is still valid.
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
<div class="one-third column">
<ul class="nav-link">
<li class="button">Going to put code here.</li>
</ul>
</div>
As you can see I'm repeating the unordered lists inside of the div class. This is necessary for me because I'm using Skeleton boilerplate and I need them to be in 3 columns, with the unordered lists.
I tried putting the list items inside the divs, but the validator states you cannot put div tags inside the unordered lists. So I'm asking if this method is still okay for me to use, since this website will be used as a public template. If there's an alternative way I can code this, please let me know. Thank you.
I have an issue when rendering templated items within a ul with some pre-defined li elements, that i'd like the templating engine to respect:
This is what I'm trying to achieve:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
<li class="first">some pre-info</li>
//this is where I'd like knockout to render my templates
<li class="last">som-post info</li>
</ul>
This is what I actually get:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
//this is where all my templateItems get rendered
<li class="first">some pre-info</li>
<li class="last">som-post info</li>
</ul>
An obvious alternative is to use a template that rendered the entire ul, and looped over the child items, but this would render the entire template every time there was a change, and not just the updated items (li), which is the preferred way.
The best option is to use the containerless control-flow bindings available in KO 1.3 (in RC).
It would look like:
<ul>
<li class="first">some pre-info</li>
<!-- ko foreach: itemsToRender -->
<li class="item" data-bind="text: name"></li>
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
or
<ul>
<li class="first">some pre-info</li>
<!-- ko template: { name: 'itemTemplate', foreach: itemsToRender } -->
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
<script id="itemTemplate" type="text/html">
<li class="item" data-bind="text: name"></li>
</script>
Sample: http://jsfiddle.net/rniemeyer/tzJU3/