I'm trying to render attributes of an svg according to several properties assigned to the 'card' object instances in my 'Card' Collection. I've never used Blaze explicitly before, I'm just curious if I need to add it as a package or whether it's functionality is now built into the latest Meteor version.
<template name="card">
<div class="card svg">
<!-- <svg class="symbol" style="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768">
<path d="M511.9 184l-100 200 100 200 100-200" />
</svg>
{{#each cards}}
{{> svgType this}}
{{/each}}
</div>
</template>
<template name="svgType">
{{#each svgTypes }}
<svg class="color shape quant fill">
{{> UI.dynamic template=this}}
</svg>
{{/each}}
</template>
---and then I have a list of templates in an array similar to the approach taken here: https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
So I'm making a template for the color, shape, quantity, and fill of the svg(s) rendered to each card-- then using the svgType template to render them according to my logic (ie, if (card.color === 'r', svg.color = '#12345)
Thanks in advance for any insight you can provide here...
Related
I am working on a page with material-components-web v8.0.0 and I am having trouble navigation the options of my mdc-select elements with keyboard. On arrow-up it only selects the first option, on arrow-down only the last option. Selecting any option in between is not possible.
Tried it in Chrome, Firefox and Opera.
The select markup (made off the example markup in the documentation):
<div id="employees_count_select" class="mdc-select mdc-select--filled fullwidth input-space">
<div class="mdc-select__anchor">
<span class="mdc-select__ripple"></span>
<span class="mdc-select__selected-text"></span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-floating-label">Employees count</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface fullwidth">
<ul class="mdc-list" role="listbox">
<li class="mdc-list-item mdc-list-item--selected" data-value="small" aria-selected="true" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">1-49</span>
</li>
<li class="mdc-list-item" data-value="medium" aria-selected="false" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">50-249</span>
</li>
<li class="mdc-list-item" data-value="large" aria-selected="false" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">more than 249</span>
</li>
</ul>
</div>
</div>
My source import:
import * as mdc from "material-components-web";
My initialization code (typescript):
private instantiateMaterialSelects = (): void => {
console.debug("instantiate material selects");
const selects = document.querySelectorAll('.mdc-select');
Array.apply(null, selects).forEach((uList: HTMLElement) => {
const mdcSelect = mdc.select.MDCSelect.attachTo(uList);
if (uList.id) {
this._mdcSelects[uList.id] = mdcSelect;
}
});
};
No related error messages in the browser console.
Things I tried to fix it: added all the attributes etc. like in the documentation; instantiation with new keyword; add more options, even and odd amounts
Is arrow navigation in select options just not supported, or am I doing something wrong?
I couldn't really get something useful from google or the mdc issues. I might have overlooked something though.
Thanks for any help.
I don't have enough reputation to add comment, so I have to use answers.
I tried your HTML and it seems to be fine, see jsfiddle link in comment to this post. My guess - it is some other your code messing with arrows keys behavior. Try creating minimal reproducible sample.
I have components created with ng-repeat and I want them to be flex children:
<div style="display:flex; flex-wrap: wrap">
<div ng-repeat="item in data" style="flex-basis: 30%">
<my-component item="item"></my-component>
</div>
<div>
Where my component's template is:
<div class="c">
...
</div>
It is kind of working, but the my-component items are not all in the same height as they would have been if they were simply divs.
I can workaround this by setting .c{height: 100%} but it messes up with the wrapping.
Can I acheive this behaviour with AngularJS 1.5 at all?
Attached codepen for repro: http://codepen.io/anon/pen/ENqvvO
Thanks!
The problem is that when using the component you have a new element wraping the div.c element, so that the flex behaviour doesn't bound the two elements of your css. Your example (from plunkr) without the component works because it doesn't have the my-component in between.
div.flex-container
my-component // <- this guy is breaking off the flex connection
div.c
In order to fix it you can style the tag my-component instead of .c so that the flex can be applied directly between div.flex-container and my-component.
Actually I recommend you to create a container component and an item component so that things are kept clear and solid.
For example:
<list>
<list-item>Item 1</list-item>
<list-item>Item 2</list-item>
<list-item>Item 3</list-item>
<list-item ng-repeat="item in items"> {{ item }} </list-item>
</list>
And also:
<gallery>
<gallery-item ng-repeat="photo in photos">
<photo img="photo "></photo>
</gallery-item>
</galery>
Beautiful, isn't it? :{D
I'm looking for a (best-practice) way to iterate through a list of elements in the scope of an angular controller and generate a div with an element specific id and append a svg to the element specific div. I'm very new to Angular...and suspect that the following attempt fails because I misunderstand Angular bindings?
What is a better way to do the following:
<div id="top_level">
<div ng-repeat="item in items">
<div id={{item.id}}>
<script type="text/javascript">
var svg_img = build_svg(args);
document.getElementById({{item.id}}).appendChild(svg_img);
</script>
</div>
</div>
</div>
Thanks!
You should place your logic inside of your controller and conditionally render as much html as necessary rather than invoking a script tag inside of an ng-repeat..
<div ng-controller="YourCtrl">
<div id="top_level">
<div ng-repeat="item in items">
<div id={{item.id}}></div>
<div ng-bind-html="$scope.buildSvg(item)">
</div>
</div>
</div>
</div>
In your angular controller, you would then add a function to build out and return the svg for you to render.
app.controller('YourCtrl', ['$scope', function ($scope) {
$scope.buildSvg = function (item) {
// add logic here.
}
});
What does your function build_svg return?
We'd need a little more information about the kind of end-result you would like to get.
But yeah, it's not really good practice to have a script element within a ng-repeat directive.
I see two solutions here:
1- Build your SVG directly within the ng-repeat
<div id="top_level">
<div ng-repeat="item in items">
<div id={{item.id}}>
<svg height="{{item.svg.attrs.height}}" width="{{item.svg.attrs.width}}">
<circle cx="50" cy="50" r="40" stroke="black" stroke- width="3" fill="red" />
</svg>
</div>
</div>
</div>
Here is a plunker of this method:
http://plnkr.co/edit/g58BUPScjKHjRLAfx6ks?p=preview
2- Create a directive to generate your SVG with some additional parameters and flexibility.
<div id="top_level">
<div ng-repeat="item in items">
<div id={{item.id}}>
<my-svg attrs="item.svg.attrs"></my-svg>
</div>
</div>
</div>
The my-svg directive would generate a SVG element with the attrs parameters.
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.
I'm creating a slide - so there's 3 images every one div like so
<div>
<img />
<img />
<img />
</div>
</div>
<img />
<img />
<img />
</div>
None of the code around the internet works flawlessly -
https://github.com/johanpoirier/resthub-backbone-stack/commit/8a318477d56c370d2a0af4da6eae9999c7bb29da
http://jaketrent.com/post/every-nth-item-in-handlebars-loop/
http://rockycode.com/blog/handlebars-loop-index/
http://www.arlocarreon.com/blog/javascript/handlebars-js-everyother-helper/
and yes including the answers here in stack overflow.
Can anyone provide some code that works perfectly at this current period (version of Ember/Handlebar)?
I have an array of models so i'd like to do something like
{{#each model}}
{{if index % 3 == 0}}
{{/if}}
{{/each}}
I have been finding that index or #index do not work from within the template, but you can access it from within a helper.
I've made an example here that demonstrates this:
http://jsbin.com/egoyay/1/edit
Edit: Adding code to answer, demonstrating {{else}} block
Handlebars helper (for non-Ember use):
Handlebars.registerHelper('ifIsNthItem', function(options) {
var index = options.data.index + 1,
nth = options.hash.nth;
if (index % nth === 0)
return options.fn(this);
else
return options.inverse(this);
});
Usage:
<ol>
{{#each model}}
<li>
{{#ifIsNthItem nth=3}}
Index is a multiple of 3
{{else}}
Index is NOT a multiple of 3
{{/ifIsNthItem}}
</li>
{{/each}}
</ol>
If you specify itemViewClass in each helper, then it will create a view for each item and set contentIndex property:
{{#each model itemViewClass="Ember.View"}}
{{view.contentIndex}}
{{/each}}
tested in Ember v1.1.0