When trying to define an element with conditional attribute
<polymer-element name="hover-button" extends="paper-button" hover?="{{hover}}" attributes="hover">
I'm running into the following error
Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'hover?' is not a valid attribute name.
Still at Polymer 0.5.
Here is the full code:
<polymer-element name="hover-button" extends="paper-button" hover?="{{hover}}">
<template>
<shadow></shadow>
</template>
<script>
(function(){
Polymer('hover-button', {
ready: function(){
this.addEventListener('mouseover', function(){ this.hover = true; }.bind(this));
this.addEventListener('mouseout', function(){ this.hover = false; }.bind(this));
},
activeChanged: function(){ /* foo */ },
hoverChanged: function(){ /* bar */ }
});
})();
</script>
</polymer-element>
You can't use data-binding features on <polymer-element> itself. Furthermore, any attribute that is declared on <polymer-element> (which is not part of the attributes attribute is added to instances of the element by default. I suspect that's where the error is coming from.
Related
I have a vue3 app, and one of the child component uses vue-draggable.
In the parent component I have an object (let's call it myJson) which propagates to child component with props.
So far it works as expected.
However, when adding 'KeepAlive' to the parent component, every time I drag the items, myJson is set to the drag event instead of the origin data it had.
It still occures even if I pass to the child component a copy of myJson (with JSON parse-JSON stringify). See details below
parent component:
<template>
<KeepAlive>
<component :is="activeComponent" :my-json="myJson" />
</KeepAlive >
</template>
data: () => ({
myJson: { ...someData }
})
mid component:
<template>
<list-items :items="items" />
</template>
<script>
export default {
components: { ListItems },
computed: {
items() {
return JSON.parse(JSON.stringify(this.myJson.value.items))
}
},
}
</script>
child component (ListItems):
<template>
<draggable
v-model="items"
animation="100"
handle=".dnd-handle"
item-key="product"
class="items-list"
#start="drag=true"
#end="drag=false"
>
<template #item="{ element, index }">
{{element}}
</template>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
props: ['items'],
}
</script>
The items are displayed correctly in the component.
Before dragging, myJson is an object with my data.
After dragging myJson is an event.
Any idea?
vuedraggable version is 4.1.0
--UPDATE--
In parent component there is a function "update", which gets value and updates myJson.
methods: {
update (value) {
myJson = value
}
}
I found out that every time I drag, there is a call to this function with the dragging event as value, even when I try to catch the draggable events. Thats why myJson gets wrong value.
My problem was solved when I changed the function's name. But anyone knows why this happens?
For example:
<script>
export default {
data() {
return{
varinjs: 1,
}
}
}
</script>
<style lang="stylus">
varincss = varinjs
body
if varincss == 0
background-color red
else varincss == 1
background-color blue
</style>
Is it any way to access javascript variables in css？can use sass or less, but I'd
like stylus much more.
I know this is not an answer to 'this' question (I wanted to comment) but I will try to give an alternate solution.
Stylus supports a built-in function json(path[, options]), which means you can put all variables into a JSON file and supply them both to your JS files as well as Stylus files.
You cannot access stylus variable using JS and you probably won't be able to do that unless you find some sort of build-time libraries that would convert specified js file/variable into stylus variables.
You could use CSS custom properties to achieve that.
Bind stylus variables with them and just handle changes on JavaScript.
<script>
export default {
data () {
return {
theme: { background: '#ff0000' }
};
},
watch: {
'theme.background': { immediate: true, handler: 'applyVariables' }
},
methods: {
applyVariables () {
const scope = document.documentElement.styles;
scope['--theme-background'] = this.theme.background;
}
}
};
</script>
<style lang="stylus">
theme-background = var(--theme-background, #ff054a);
// The first argument is variable name and second is placeholder value.
.theme-button
background-color: theme-background
</style>
CSS Custom Properties reference on MDN
I'm trying to customize a couple tabs because they're different.
Here's what I have:
<md-tabs>
<md-tab ng-repeat="tab in tabs" ng-class="tab.customClass">
<md-tab-label ng-bind="tab.label"></md-tab-label>
</md-tab>
</md-tabs>
My issue: the custom class is not in the compiled md-tab-item
NOTE: the gets replaced because it's only needed to generate tab buttons and panes.
I don't know how many tabs I have, so I cannot write CSS based on position.
Any ideas?
If you are trying to customize how the tab itself looks at the top you can do this through the use of a decorator. This will allow you to alter how directives behave at run time.
For example if you are trying to style the tab itself, that directive would be "md-tab-item"
(function () {
'use strict';
MdTabItemDecorator.$inject = ['$provide'];
angular.module('common').config(MdTabItemDecorator);
function MdTabItemDecorator($provide) {
$provide.decorator('mdTabItemDirective', [
'$delegate',
'$controller',
function ($delegate) {
var directive = $delegate[0];
directive.compile = function () {
return function (scope, elem, attrs) {
directive.link.apply(this, arguments);
elem.attr('style', 'color:red');
scope.tabIndex = scope.$parent.$index;
};
};
return $delegate;
}
])
}
})();
The above example would change the color of the tab text to red.
What's happening here is that we are creating a decorator mdTabItem with
function MdTabItemDecorator($provide) {
$provide.decorator('mdTabItemDirective', [
function ($delegate) {
...
}
])
This gives you access to the $delegate object which is a representation of the directive object that is about to be instantiated.
This allows us to make some modifications and return the delegate object changing how the directive behaves.
In this case I am taking the existing link function and extending it's functionality to set the style of the directive element.
directive.compile = function () {
return function (scope, elem, attrs) {
directive.link.apply(this, arguments);
elem.attr('style', 'color:red');
scope.tabIndex = scope.$parent.$index;
};
};
How is this for a solution for syning the data from a paper input to a firebase database.
properties: {
teamid: {
type: String,
value: null
},
formid: {
type: String,
value: null
},
metaName: {
type: String,
value: null,
observer: '_updateMetaName'
}
},
_updateMetaName: function(metaName) {
var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';
firebase.database().ref(path).set(metaName);
},
The data metaName comes from a a paper-input element
<paper-input value="{{metaName}}"></paper-input>
I'm using an observer over the on-change attribute because I hate the idea that a user must move out of an input for it to persist.
I've also chosen not to use PolymerFire because i dosen't have some features I need and its not production ready.
I also don't like the idea that the observer runs multiple times before any data has been changed. And that should, i thought, break it but its working to my surprise.
What other options do I have?
Are their any disadvantages to my current solution?
One disadvantage is that every keystroke fires off a request to Firebase, which could be inefficient (a waste of CPU and bandwidth).
To address this, you could debounce the callback with this.debounce(jobName, callback, wait), as shown in the following demo.
HTMLImports.whenReady(_ => {
"use strict";
Polymer({
is: 'x-foo',
properties : {
metaName: {
type: String,
value: 'Hello world!',
observer: '_metaNameChanged'
}
},
_setFirebaseMetaName: function(metaName) {
var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';
//firebase.database().ref(path).set(metaName);
console.log('metaName', metaName);
},
_metaNameChanged: function(metaName) {
this.debounce('keyDebouncer',
_ => this._setFirebaseMetaName(metaName),
500);
}
});
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-input label="Meta Name" value="{{metaName}}"></paper-input>
</template>
</dom-module>
</body>
codepen
I've decided to go with on-keyup="_updateViewDesc" to stop a error occurring when multiple clients have the same page open. Using observers, when some data updates, it triggers the observer on all the connected clients. Causing characters to go missing.
I want to achieve communication between child parent with Polymer element.
Here my index.html
<proto-receiver data="message">
<proto-element data="message"></proto-element>
</proto-receiver>
Both element have their respective "data" property
properties: {
data: {
value: 'my-data',
notify: true,
}
},
In proto-receiver, which is the parent I update "data" by handling simple click
<template>
<span on-tap="onClick">proto receiver: {{data}}</span>
<content></content>
</template>
onClick: function () {
this.data = 'new-message';
},
I want the change to be propagate to the child element as well, as it mentioned here.
I achieve this by passing a setter in my child element and called it like this. Which is, I guess, not the way it should be done.
Polymer.Base.$$('body').querySelector('proto-element').setData(this.data);
What I'm doing wrong
Thanks
UPDATE:
For those coming here. The proper way of doing this is by using Events.
Polymer 1.x
this.fire('kick', {kicked: true});
Polymer 2.x (simple javascript)
this.dispatchEvent(new CustomEvent('kick', {detail: {kicked: true}}));
In both case the receiver should implement the regular addEventListener
document.querySelector('x-custom').addEventListener('kick', function (e) {
console.log(e.detail.kicked); // true
})
To provide a concrete example to Scott Miles' comments, if you can wrap your parent and child elements in a Polymer template (such as dom-bind or as children to yet another Polymer element), then you can handle this declaratively. Check out the mediator pattern.
parent element:
<dom-module id="parent-el">
<template>
<button on-tap="onTap">set message from parent-el</button>
<p>parent-el.message: {{message}}</p>
<content></content>
</template>
<script>
Polymer({
is: 'parent-el',
properties: {
message: {
type: String,
notify: true
}
},
onTap: function() {
this.message = 'this was set from parent-el';
}
});
</script>
</dom-module>
child element:
<dom-module id="child-el">
<template>
<p>child-el.message: {{message}}</p>
</template>
<script>
Polymer({
is: 'child-el',
properties: {
message: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
index.html:
<template is="dom-bind" id="app">
<parent-el message="{{message}}">
<child-el message="{{message}}"></child-el>
</parent-el>
</template>
<script>
(function(document) {
var app = document.querySelector('#app');
app.message = 'this was set from index.html script';
}) (document);
</script>
JS Bin
I was facing same issue and got solution for it and fixed it as below
this.fire('iron-signal', {name: 'hello', data: null});
You can refer this iron-signals you will get the solution which you are looking for its basically event fire from any element to another
Hope this will help you
Polymer iron signals