I have a simple demo application with a foreach binding of "li" elements inside an "ul" element.
<ul data-bind="foreach: sortedItems">
<li>
<div>
<span data-bind="text: name">
</div>
</li>
</ul>
Is there a way to create the same binding without a parent element?
Yes, you can use knockout's virtual element syntax for this purpose. See the first example on this page.
<!-- ko foreach: sortedItems -->
<li> ... </li>
<!-- /ko -->
Related
<ol ng-repeat="item in ctrl.items">
<h3 ng-bind-html="item.title"></h3>
<li ng-repeat="description in item.items" ng-bind-html="description"> </li>
</ol>
This is how it is rendered on screen:
**Title1**
1. Desciption1
2. Description2
**Title2**
1. Description1
But as per the HTML standards, ol should only contain li, not h3.
Any idea how we can achieve this?
Why don't you just wrap this construction in one more block? Placing h3 tag in this case will be correct enough.
<div ng-repeat="item in ctrl.items">
<h3 ng-bind-html="item.title"></h3>
<ol>
<li ng-repeat="description in item.items" ng-bind-html="description"></li>
</ol>
</div>
In other case, if you would like to create list of lists and you really want to use <ol> for both you can do in the next way:
<ol ng-repeat="item in ctrl.items">
<li>
<h3 ng-bind-html="item.title"></h3>
<ol>
<li ng-repeat="description in item.items" ng-bind-html="description"></li>
</ol>
</li>
</ol>
In this way you have nested lists, but all h3 tags are inside the li tag, not inside the oldirectly. That is fine. HTML syntax rules allow headings tags in the li elements. I would prefer to use first variant, because it looks clearer and more understandable.
But second one also is a valid HTML structure according to W3 validator:
Use div inside li tag
as follows:
<li ng-repeat="description in item.items">
<div>
<h3 ng-bind-html="item.title"></h3>
<div ng-bind-html="description"></div>
</div></li>
I'm using angular recursive templates to generate a tree structure. I want to use x-editable for single leaf renaming. But the whole tree gets to "edit state" instead.
Check the fiddle: http://jsfiddle.net/7bLhvjd5/
<ul>
<li ng-repeat="data in tree" ng-include="'tree_category_renderer.html'" />
</ul>
< script type="text/ng-template" id="tree_category_renderer.html">
< div>
<span class="name" editable-text="data.name" e-form="textBtnForm">{{data.name}}</span>
<button ng-hide="textBtnForm.$visible" ng-click="textBtnForm.$show()">edit</button>
</div>
<ul>
<li ng-repeat="data in data.children" ng-include="'tree_category_renderer.html'" />
</ul>
</script>
Any ideas how to fix this?
I'm facing an issue with Kendo UI:
When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.
In my case:
Here is the HTML:
<div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
<div id="profileContent"></div>
She/He Might Like:
<div data-role="scrollview" data-page="0">
<div class="login-scrollV" id="page1" data-role="page">
</div><div class="login-scrollV" id="page2" data-role="page">
</div><div class="login-scrollV" id="page3" data-role="page">
</div>
</div>
</div>
and with Mustache JS, I generate this content dynamically and append it to #profileContent
<script id="profileTemplate" type="text/x-handlebars-template">
<ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
<li>Profile
<ul>
<li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
<li>Gender <span class="sales-up">{{genre}}</span></li>
<li>Notation <span class="sales-up">Not Yet Ready</span></li>
</ul>
</li>
<li>Center Of Interests
<ul>
<li>Rock</li>
<li>Opera</li>
<li>Exhibitions</li>
</ul>
</li>
</ul>
</script>
In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.
I understand why (I assume the html should be there from the beginning), so my question is:
How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?
Many Thanks
You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.
In the context of a ko foreach: widgits I am building list items with a few buttons that expose options to the user.
<ul>
<!-- ko foreach: wigits -->
<li>
<span data-bind="text: $data.text"></span>
<button id="fast" data-bind="click: function(){$root.spinWidget($data, '1000rpm')}"></button>
<button id="medium" data-bind="click: function(){$root.spinWidget($data, '500rpm')}"></button>
<button id="slow" data-bind="click: function(){$root.spinWidget($data, '200rpm')}"></button>
</li>
<!-- /ko -->
</ul>
When I click the first button I see the click handler is invoked each click. When I click or inspect the other buttons i see that no click handler is setup.
the problem ended up being that i had included knockoutjs below jquery, once i moved it above, it works. idk why but it does.
I'm in trouble with a foreach that I need to do with Angular.
Thats's what I want to do :
<ul>
<div ng-repeat="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li class="divider"></li>
</div>
</ul>
How can I do something like that, but in valid HTML structure ? (without a <div> between <ul> and <li>)
I see only one solution :
Replace the <div> with a <ul> and make a lot of css rules to make it like it doesn't exists
In addition, I use Angular 1.4.8.
Thanks !
You shouldn't have to alter your data structure at all. Instead just utilize the ng-repeat-start & ng-repeat-end directive. You'll have separate <ul>s but in terms of rendering, you can easily modify the CSS to make it appear to be a seamless list.
<ul ng-repeat-start="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li ng-repeat-end class="divider"></li>
</ul>
http://codepen.io/jusopi/pen/KVZBLv
Probably the easiest way is to use a custom collection groupedCommands that is bound to the angular scope in code and contains the items in the correct order.
Then use ng-repeat-start for the enhanced repeat directive. There is a special ng-repeat-start and ng-repeat-end attribute combination that you can use for this case:
<ul>
<li ng-repeat-start="c in groupedCommands">{{c.text}}</li>
<li class="divider" ng-repeat-end></li>
</ul>
Try This one,
<ul>
<!-- ng-repeat: g in groups -->
<span ng-repeat="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li class="divider"></li>
</span>
</ul>
This may solve your problem.
Caution : It is not a good way to use <span> between <ul> and <li>.