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.
Related
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 -->
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
Very simple scenario here, I'm hoping there is a simple solution.... Jquery would handle this but for efficiency I want to use the knockout click binding.
<ul>
<li data-bind="click: ShowMyUser">
<span>My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser">Delete Icon</i>
</li>
<ul>
In this example I have a list of Usernames or Email Addresses. What I would like to do, is on the click event of the ROW (e.g. li), show the user details. On the click event of the DELETE icon I would like to show a pop up.
I have both of those methods written and working. My problem is that on clicking the delete icon it ALSO fires the li event.
In order to get round this I have implemented the following:
<ul>
<li>
<span data-bind="click: ShowMyUser">My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser">Delete Icon</i>
</li>
<ul>
However this means that the user must click on the text, I'm not a big fan of this, I think it's un-intuitive.
Any thoughts guys n gals?
KnockoutJS already supports stop bubbling, no need to write it from scratch: http://knockoutjs.com/documentation/click-binding.html (go to Note 4)
Just add clickBubble: false to the child click.
<ul>
<li data-bind="click: ShowMyUser">
<span>My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser, clickBubble: false">Delete Icon</i>
</li>
<ul>
Thank you to Roy J for posting a very helpful link, from that page I found a solution. Firstly I created the following bindingHandler:
ko.bindingHandlers.stopBubble = {
init: function(element) {
ko.utils.registerEventHandler(element, "click", function(event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
};
I then added this to my delete icon so it would not propagate through and call the li click event:
<ul>
<li>
<span data-bind="click: ShowMyUser">My Email Address Or Username</span>
<i data-bind="click: DeleteMyUser, stopBubble: true">Delete Icon</i>
</li>
<ul>
Use binding clickBubble or return false from DeleteMyUser click handler
if you want to have dynamic logic to the bubble but seperated from the click handler you can do
https://jsfiddle.net/h1mrfLe6/
I am having issues getting a dropdown to be bound properly in an ember js app because I have action handlers on click inside of the list and the foundation events are conflicting.
Template name:
<a data-dropdown="groupDrop" id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
When I run $(document).foundation() it overrides the action handlers, and when I remove that it doesn't trigger the dropdown.
What I think I need to do is add some action handler to the a tag and then have it open up the dropdown, so I can not use the foundation handlers.
The function you need to use to trigger the dropdown is Foundation.libs.dropdown.toggle
You pass in a jQuery object of the dropdown link to toggle it
You can solve it like this:
template:
<a data-dropdown="groupDrop" {{action 'showDropdown'}} id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
controller:
Ea.GroupGuestsController = Em.ArrayController.extend
actions:
showDropdown: ->
Foundation.libs.dropdown.toggle($('#groupDropdownLink'))
Twitter bootstrap accordion not working with Sammy.js
Is a similar question but was never answered.
I am creating an affixed Twitter Bootstrap side nav-list and using has based href's but when I click on them Sammy is trying to catch the routes. Since I am dynamically creating the Id's and href's I can prevent them from ever matching an existing route but it constantly hits the console with errors. I am sure in production they won't show up but is there anything that can be done to prevent this?
<ul class="nav nav-list affix">
<!-- ko foreach: sections -->
<li class="nav-header"><span data-bind="text: navDesc"></span></li>
<!-- ko foreach: paragraphs -->
<li><a data-bind="attr: { href: '#' + navProp() }"><span data-bind="text: navDesc"></span> <i class="icon-chevron-right"></i></a></li>
<!-- /ko -->
<!-- /ko -->
</ul>
I know this will be fixed in the next version of Durandal but just checking any other options.
Durandal 1.2 provides a guardRoute method, which will allow you to intercept the call before it reaches sammy.
Check out How to handle / ignore a bad route with durandal? for more information.