I have a list of items and I want to highlight the "selected" one (this is linked to another interface, so using pure CSS will not work). I'm guessing I could do this:
<!-- ko if: isSelected -->
<span class="selected">
<!-- ko endif -->
<span class="myItem">content goes here</span>
<!-- ko if: isSelected -->
</span>
<!-- ko endif -->
and maybe even this:
<span class="myItem<!-- ko if: isSelected --> selected<!-- ko endif -->">
content goes here
</span>
But I suspect there is a better way. I have been unable to find it.
According to the documentation here: http://knockoutjs.com/documentation/css-binding.html
<span class="myItem" data-bind="html: name, css: { selected: isSelected()"><span>
Works great!
Related
I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?
<div class="row">
<ul class="collection with-header" v-if="listaRoles.length > 0">
<li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
<li v-for="r in listaRoles" :key="r.id" class="collection-item">
<div class="left-align">
<span> {{ r.descricao }} </span>
<input type="checkbox" />
</div>
</li>
</ul>
</div>
You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.
<label>
<input type="checkbox" />
<span>Red</span>
</label>
Any deviation from this will break the component.
EDIT:
Checkboxes inside li works perfectly fine, here a codepen to demonstrate:
https://codepen.io/doughballs/pen/KKpNrPy
The error is coming from somewhere else.
https://materializecss.com/checkboxes.html
I want to display telephone field on create account page along with the first name and last name. Telephone field is mapped to Address Fields so cannot display telephone field separately and hiding the other address fields.
Help me to display just the telephone field and not the address fields.
Replace the following html file by above given code :- "vendor\magento\module-checkout\view\frontend\web\template\shipping-address\address-renderer\default.html
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="shipping-address-item" data-bind="css: isSelected() ? 'selected-item' : 'not-selected-item'">
<!-- ko text: address().firstname --><!-- /ko --> <!-- ko text: address().lastname --><!-- /ko --><br/>
<!-- ko text: address().telephone --><!-- /ko --><br/>
<!-- ko if: (address().isEditable()) -->
<button type="button"
class="action edit-address-link"
data-bind="click: editAddress, visible: address().isEditable()">
<span data-bind="i18n: 'Edit'"></span>
</button>
<!-- /ko -->
<button type="button" data-bind="click: selectAddress" class="action action-select-shipping-item">
<span data-bind="i18n: 'Ship Here'"></span>
</button>
</div>
I have this main layout
<!-- Wrapper-->
<div id="wrapper">
{{#if currentUser }}
<!-- Page wrapper -->
{{> topNavbar }}
<!-- Navigation -->
{{> navigation }}
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
{{> yield}}
</div>
<!-- End page wrapper-->
<!--{{> rightSidebar }}-->
{{else}}
{{> loginPage }}
{{/if}}
</div>
<!-- End wrapper-->
With the obvious purpose of displaying the login page if users are not logged-in. An unintended effect is when users navigate between certain pages/routes it can occasionally show the loginpage for a half second or two.
I am sure there is a way to do this with subscriptions, but just haven't gotten their in Meteor yet... was wondering if one of the ninjas out there that will look at this and scoff can pass a quick hint.
Thanks!
I have seen How to get rid of Meteor template flickers but I am hoping that there is a way to solve this without routing -- can I add the code to the main templates javascript file?
The problem is, there are not two states of logged in and not. There is also the in between state where the client is logging in. To account for that, there is a {{loggingIn}} helper which you could use as:
<!-- Wrapper-->
<div id="wrapper">
{{#if currentUser }}
<!-- Page wrapper -->
{{> topNavbar }}
<!-- Navigation -->
{{> navigation }}
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
{{> yield}}
</div>
<!-- End page wrapper-->
<!--{{> rightSidebar }}-->
{{else}}
{{#if loggingIn}}
loading...
{{else}}
{{> loginPage }}
{{/if}}
{{/if}}
</div>
<!-- End wrapper-->
Also on an unrelated note, you can use
{{!-- Spacebars comments do not get into the DOM --}}
instead of
<!-- This still gets into the DOM, but not rendered by the browser -->
I have a dynamic form that's using <core-ajax> to bind data into multiple <paper-dropdown-menu>'s. My question: What is the preferred way to change the data in each dropdown based upon the previous one's selection. Right now, there is no javascript for it, only Polymer data-binding. Here is the code:
<polymer-element name="example-element" attributes="">
<template>
<link rel="stylesheet" href="example-element.css">
<core-ajax auto
url="http://example.json"
response="{{regionData}}"
handleAs="json">
</core-ajax>
<!-- global user object -->
<pvc-globals id="globals" values="{{globals}}"></pvc-globals>
<!-- page container -->
<div class="background" vertical layout>
<!-- toolbar -->
<template is="auto-binding">
<!-- Add teams dialog -->
<paper-action-dialog heading="Add A Example" backdrop autoCloseDisabled
id="addTeamDialog">
<p>Once this form is complete, you will have a new example on your account.</p>
<br>
<!-- Region Name -->
<paper-dropdown-menu label="Choose Your Region" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selection}}">
<template repeat="{{region in regionData}}">
<paper-item name="{{region.name}}">{{region.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- State Name depending on what region you choose -->
<paper-dropdown-menu label="Choose Your State" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template ref="{{region.name}}" repeat="{{region, regionIndex in regionData}}">
<paper-item>{{region.states[regionIndex]}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- Club Name -->
<paper-dropdown-menu label="Choose Your Club depending on what region you choose" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{region, regionIndex in regionData}}">
<template repeat="{{clubs in region.clubs}}">
<paper-item>{{clubs.name}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- Team Name -->
<paper-dropdown-menu label="Choose Your Team" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{region, regionIndex in regionData}}">
<template repeat="{{clubs in region.clubs}}">
<paper-item>{{clubs.teams[regionIndex]}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!-- <paper-input-decorator label="Your Team Name" floatingLabel
error="Team Name is required!" autovalidate>
<input is="core-input" type="text" value="{{teamName}}" required>
</paper-input-decorator> -->
<paper-button dismissive on-tap="{{openInfo}}">More Info...</paper-button>
<paper-button affirmative>Cancel</paper-button>
<paper-button affirmative>Add Team</paper-button>
</paper-action-dialog>
<!-- more info dialog (At time, adding `backdrop` attr to this caused error on close) -->
<paper-dialog heading="More Info For Adding Teams" transition="core-transition-top"
id="infoDialog">
<p>If you're region or team is missing, please email us at
info#mintonette.io so we can contact the
neccessary region/authorities to request your addition to join our community!</p>
</paper-dialog>
<!-- toast -->
<paper-toast id="toast1" text="{{message}}" onclick="discardDraft(el)"></paper-toast>
</div>
</template>
<script src="example-element.js"></script>
</polymer-element>
Here is my example of dependent(cascading) drop-down's: JSBin
It is commented, but shortly this is what it does:
it assumes that there is saved state(in the DB) and at load it
initiate the drop-downs according to that state.
it catches selection changes(for storing them after).
Found what I feel to be the most 'Polymer-way' possible to this question (until a Polymer team member answers it). Once you have access to your JSON data via <core-ajax> element, then bind and loop through it in your <paper-dropdown-menu> like so:
<core-ajax auto
url="http://jsonexample.com/example.json"
response="{{yourData}}"
handleAs="json">
</core-ajax>
<!-- Region Name -->
<paper-dropdown-menu label="Your Label" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selection}}" on-core-select="{{DDSelected}}">
<template repeat="{{something in yourData}}">
<paper-item name="{{something.name}}">{{something.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
Notice that on the <core-menu> element there is the on-core-selected attribute that binds to a function in our script, which looks like this:
regionSelected: function(e) {
var convert = [];
// save selected item
this.item = this.DDSelection;
// Loop through ajax data to find obj selected that matches selection
for (var i = 0; i <= this.yourData.length - 1; i++) {
if (this.yourData[i].name === this.item) {
this.yourObj = this.yourData[i];
// convert obj to array b/c Polymer doesn't loop -> obj
convert.push(this.yourObj);
this.convert = convert;
}
}
}
What this is basically doing is taking the selection that the user chose and looping through your ajax data to find a matching property name. Once it has, then convert that object into an array (if necessary). This is crucial because as of now, Polymer only loops through arrays - not objects. Then, store it as a variable called convert
Once you do this, in your next dropdown, loop through convert and you are golden:
...
<paper-dropdown-menu label="Choose Your Second" style="width: 100%;"
disabled?="{{!selection}}">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{key, index in convert}}">
<template repeat="{{prop in key.props}}">
<paper-item>{{prop}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
A good UX move is to also disable the dropdown until the first has been selected. Notice the disabled?="{{selection}}" attribute on the <paper-dropdown-menu> element which is doing that...
That's it!
Very simple question.
Say I have this HTML in my view():
<a id="btnXYZ" class="" data-bind="click: editAction">Button</a>
Simple anchor tag that would execute editAction if clicked.
Now if I have something like this:
<a id="btnXYZ" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
Let say isOwner(ref) evaluates to true, I see anchor with no text. Not good.
Expected result would be same as before (first example).
And now lets say I have something like this:
<div class="">
<a id="btnX" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
<a id="btnY" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
<a id="btnZ" class="" data-bind="click: editAction, if: isOwner(ref)">Button</a>
</div>
Same as before, if isOwner(ref) evaluates to true see empty anchor tags.
Question:
How can I bind if: isOwner() to manage button visibility?
i.e.
if isOwner(ref) evaluate to true I should see a proper link/button
if isOwner(ref) evaluates to false I should see no link/button at all
You can use virtual elements to achieve that:
<!-- ko if: isOwner(ref) -->
<a id="btnXYZ" class="" data-bind="click: editAction">Button</a>
<!-- /ko -->
Also if you want you can display something completely different instead like:
<!-- ko ifnot: isOwner(ref) -->
whatever you want
<!-- /ko -->
You want to use the visible binding. This will show and hide the entire element, while the if binding just controls the contents of the element.
Here's a demo.
However in this case, I would go with #Vladimirs answer as you can wrap the virtual element around all 3 of your buttons, rather than binding them all individually.