I wrote the following code to populate a menu item:
<li class="dropdown">
Wallets <span class="caret"></span>
<ul class="dropdown-menu">
{{#if: !wallets}}
<li><a><i class="fa fa-spinner fa-pulse"></i> Loading...</a></li>
{{/if}}
{{#foreach: wallets}}
<li>
{{linkText}}
</li>
{{/foreach}}
<li role="separator" class="divider"></li>
<li><i class="fa fa-fw fa-edit"></i> Add new</li>
</ul>
</li>
I'm using knockout.punches as I'm more into curly braces than data-binding every element. wallets is an observable array loaded and kept up-to-date by SignalR.
Ok so far, but this is the way the code is rendered before the wallets observable is defined:
I'm new to knockout so maybe there's some clue I don't know about, but in general I've found little information on punches extension. Where am I wrong?
Related
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
I am using a bootstrap one page template. I have everything all squared away except that I have a menu button (when clicked exposes sidebar menu) and it works only one time. To make it work again I have to reload page. It's kind of weird because it seemed to be working fine at first, but now it doesn't. The only thing I can think of is something in the routes.rb? I will post my _navbar partial to see if I am missing something there.
Does anybody know how to make the navbar stay loaded? It's a one page site so it is basically just linking to partial on page.
Thank you for any help, I will continue to research this, but so far no luck. Btw I am using stylish portfolio theme.
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >PCC</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Vision</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >History</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
The following item list code is inside of a navbar with navbar-fixed-top. The code below is output that was originally written as haml code.
Why does the "Manage Teams" item close the dropdown menu, but "Add sale ..." does not?
<li class="dropdown open" id="settings-drop">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
<span class="glyphicon glyphicon-plus"></span>
</a>
<ul aria-labelledby="settings-drop" class="dropdown-menu" role="menu">
<li role="presentation">
<a data-remote="true" href="http://localhost:3000/sales/new?referer=notifications" role="menuitem">Add sale ...</a>
</li>
<li role="presentation">
Manage Teams
</li>
</ul>
</li>
It seems like the data-remote="true" hash is somehow interfering with bootstraps ability to detect the item being clicked on and close it.
AngularJS supports a ng-repeat-start and ng-repeat-end directive to have the ng-repeat repeat with several elements that are siblings. Is there a similar feature in Angular Dart or a different method to accomplish this?
I am trying to loop through a menu object and display it in a Bootstrap dropdown menu. Every time I repeat the dropdown-header element I would like the divider to appear before it (except the first time, which I will deal with later).
<div class="btn-group open">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Category 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="divider"></li>
<li class="dropdown-header">Category 2</li>
<li>Item 3</li>
<li>Item 4<a></a></li><a>
</a></ul><a>
</a></div>
Demo
Here's what I have but I'm not sure what to do with the divider:
<ul class="dropdown-menu" ng-if="menuItem.hasSubPages">
<li class="divider"></li><!-- not sure what to do with this -->
<li ng-class="{'dropdown-header': subMenuItem.isCategory}" ng-repeat="subMenuItem in menuItem.subMenuItems" ng-switch="subMenuItem.isCategory">
{{subMenuItem.name}}
<span ng-switch-when="true">{{subMenuItem.name}}</span>
</li>
</ul>
Thanks!
Actually AngularDart doesn't support the ng-repeat-start and ng-repeat-end directives.
As you can see in the AngularDart API, no reference is available for this kind of directive.
BUT you can accomplish what you want by encapsulating the elements into a new Component as explained here : Creating a Custom Component
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.