What I'm trying to do is define a module of utility functions, browserify it
and use it in a polymer component. Since this post:
require is not defined error with browserify
makes it clear that 'require' is only defined within the scope of the bundle (xx.js), I need
help figuring out how to access my exported function.
Here is the gist:
file: x.js
module.exports = function() {console.log("hi");}
I run
browserify x.js> xx.js
file xx.js (edited)
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==...
module.exports = function() {console.log("hi");}
},{}]},{},[1]);
My polymer component (edited)
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script type="text/javascript" src="xx.js"></script>
<dom-module id="Hello-app">
<template> </template>
<script>
Polymer({
is: 'Hello-app',
ready: function() {/* how do I access the function here, so it prints "hi" */}
});
</script>
</dom-module>
Ah, I should have read the docs for browserify more carefully.
I just needed the '-r' option, like so:
browserify -r ./x.js:hello > xx.js
and now I can modify the ready: line to read
ready: function() {require('hello')()},
Related
I'm trying to import the web component with id "test-comp" for the path "/path1":
<app-route path="/path1" import="test-component.html" template="test-comp"></app-route>
The code of the web component is the following:
<dom-module id="test-comp">
<template>
<div>Hello world</div>
</template>
</dom-module>
<script>
Polymer({
is: 'test-comp',
attached: function() {
console.log("is attached");
},
});
</script>
However, it never enters the attached callback. Any ideas? Thanks a lot.
SOLVED: It just needed to replace the template attribute with the id one.
I'm using polymer 1.2.1
I'm trying to create two polymer elements paper-button & paper-input.
I had imported following in head
<script src="third-party/js/bower/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="third-party/html/bower/polymer/polymer.html">
<link rel="import" href="third-party/html/bower/paper-button/paper-button.html">
<link rel="import" href="third-party/html/bower/paper-input/paper-input.html">
and added following in body
<paper-button>Flat button</paper-button>
<paper-button raised>Raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>
<paper-button toggles>Toggle-able button</paper-button>
<paper-input label="total">
<div prefix>$</div>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<script>
Polymer({
is: "paper-button",
// add a callback to the element's prototype
created: function() {
console.log("inside pol1");
this.textContent = "I'm a proto-element!"
}
});
Polymer({
is: "paper-input",
// add a callback to the element's prototype
created: function() {
console.log("inside pol2");
this.textContent = "I'm a proto-elemente2!"
}
});
</script>
I'm expecting a change in text of respective elements with some console but none of these happens. I get an error saying
"Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-button'. A type with that name is already registered."
I'm not quite sure what you are trying to achieve, but the answer to your question is this:
Your paper-input and paper-button have already been registered into Polymer by your <link rel="import"> tags in your <head> section, so naturally when you try to re-register them using Polymer({is:"paper-button"...}), it fails...
I also wouldn't recommend overriding a packaged element's created() callback - if you want to do your own custom tasks, create a new custom element that wraps your target element, and then call your new element instead.
I've been trying to use Polymer for a project I'm working on. And although I enjoyed it quite a lot so far, I ran into a problem I just can't solve.
I dumped it down to a simple example. Basically it's just a list element (item-list) that contains item elements (item-card) and i want to parse the items position to the element via the attribute pos. But for some reason the items attribute is allways undefined! Is this because the attribute is bound to the variable i, which dies after the template repeat? If so, how do I work around it? Is there a different approach I should be using here?
SOLUTION: You can find the solution by reading through all the comments, but to sum it up: apperantly there was a timing issue and the attribute wasn't ready at the ready callback. But I found out about the domReady callback (polymer lifecycle documentation). Using domReady it works just fine! Thanks to Günter Zöchbauer for the help!
This is the item-list.html:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="item-card.html">
<polymer-element name="item-list">
<template>
<style>
</style>
<template repeat="{{values, i in data.data}}">
<item-card pos="{{i}}"></item-card>
</template>
</template>
<script>
Polymer({
created: function()
{
this.num = 123456;
this.data = { "data":
[
{
"value":999
},
{
"value":666
},
{
"value":555
},
{
"value":222
}
]
};
}
});
</script>
</polymer-element>
This is the item-card.html
<link rel="import" href="components/polymer/polymer.html">
<polymer-element name="item-card" attributes="pos">
<template>
<style>
</style>
</template>
<script>
Polymer({
ready: function()
{
console.log("ready: " + this.pos);
}
});
</script>
</polymer-element>
I didn't bother putting the index.html in, since it just containts one item-list element.
Thanks alot!!
I think you need a pos field in <item-card> in addition to the attributes="pos" declaration.
The repeated element also references the bound model which can be accessed like querySelector('item-card').templateInstance.model property.
See https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286 for an example.
Info:
According to the comments it turned out to be a timing issue. The value wasn't yet assigned when the ready callback was called but using domReady worked.
When I try document.querySelector('core-drawer-panel').togglePanel() in the console it works but when I do the following core-drawer-panel is not ready yet?
<template>
<core-drawer-panel forceNarrow>
</core-drawer-panel>
</template>
<script>
document.addEventListener('polymer-ready', function() {
document.querySelector('core-drawer-panel').togglePanel()
console.log('polymer-ready');
});
</script>
Note that I can not wrap it in a polymer element due to issues with other js frameworks.
try this
var template = document.querySelector('template');
template.addEventListener('template-bound', function () {
//code
});
with your element inside a template you need to look for template to be ready not polymer.
I am working on a Polymer project and I a few custom elements nested. For example, I have a custom element called <example-main>. Suppose that this element has a function called displayMessage()
I have another custom element defined inside <example-main> called <example-alerts>. I want the alerts element to be able to use the function in its parent, main, to display a message.
To achieve this, I am trying to select the element <example-main id='mainEl'> by using the Polymer's Automatic Node Finding hash, this.$.mainEl and using the function like so: this.$.mainEl.displayMessage();
However, I get this error message:
Uncaught TypeError: Cannot read property 'displayMessage' of undefined
Am I making a wrong approach of having Polymer elements call functions in other Polymer objects?
To visualize things a little better, the index.html would look something like:
...
<body>
<example-main id='mainEl'></example-main>
</body>
...
while example-main.html looks something like:
<polymer-element name='example-main'>
<template>
...
<example-alerts>
</template>
<script>
Polymer(example-element, {
displayMessage: function(){
//do message showing magic
}
});
</script>
</polymer-element>
and lastly, example-alerts.html looking like:
<polymer-element name='example-alerts'>
<template>
...
<paper-button on-tap='{{callFunction}}'></button>
</template>
<script>
Polymer(example-alerts, {
callFunction: function(){
//call the function in parent
this.$.mainEl.displayMessage();
}
});
</script>
</polymer-element>
You are not doing this correct way , you cannot find nodes this way .
Node finding just search within same element defined in elements outermost template.
You should either change your approach or you can use events to handle the situation pls see the sample demo which can work for you.
<polymer-element name='example-alerts'>
<template>
...
<paper-button on-tap='{{callFunction}}'></button>
</template>
<script>
Polymer(example-alerts, {
callFunction: function(){
//call the function in parent
this.fire('ouch', {msg: 'That hurt!'});
}
});
</script>
</polymer-element>
--Second Element
<polymer-element name='example-main'>
<template>
...
<example-alerts on-ouch='{{displayMessage}}'>
</template>
<script>
Polymer(example-element, {
displayMessage: function(){
//do message showing magic
}
});
</script>
</polymer-element>