Lit-Elements external js file as storage changed by a property data binding
up vote
0
down vote
favorite
i try to use in lit-elements a external js file for init values but if i do so, it isnt changebel anymore via property binding. if i write it without the extanal storage file just use this. scope and declare it in the constructor, everything works fine. But as an external file not ... ?:/
but why?
i have two files menu.js:
import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-pages/iron-pages.js';
import './main.js'
import { store } from './store'
class MenuElement extends LitElement {
constructor() {
super()
this.page = 0;
this.ninjas = ['Ninja1', 'Ninja2', 'Ninja3']
this.log()
}
static get properties() {
return {
page: {
type: Number
},
header: String,
ninjas: Array,
store: {
type: Object,
page: {
type: Number
}
}
}
}
render() {
return html`
<style>
/* :host {
border: solid 10px blue;
} */
::slotted(h3) {
border: solid 1px red
}
</style>
<div>
<ul>
<li @click="${ (e) => { this.changePage2(e) } }">Home</li>
<li @click="${ (e) => { this.changePage(e) } }">Page</li>
</ul>
<ul>
${this.ninjas.map(i => html`<li>${i}</li>`)}
</ul>
</div>
<iron-pages selected="${ store.page }">
<slot name="lala"></slot>
<div><slot name="testSlot"></slot> Page 0</div>
<main-view></main-view>
</iron-pages>
`;
}
changePage() {
store.page = 1;
console.log(store.page)
}
changePage2() {
store.page = 0;
console.log(store.page)
}
log() {
console.log(store)
console.log(store.page)
}
}
customElements.define('app-menu', MenuElement);
and b store.js
export let store = {
page: 1
}
thank You for any ideas =)
javascript polymer-starter-kit polymer-3.x lit-element
asked Nov 21 at 22:16
brackets web
32
|
show 3 more comments
up vote
0
down vote
favorite
i try to use in lit-elements a external js file for init values but if i do so, it isnt changebel anymore via property binding. if i write it without the extanal storage file just use this. scope and declare it in the constructor, everything works fine. But as an external file not ... ?:/
but why?
i have two files menu.js:
import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-pages/iron-pages.js';
import './main.js'
import { store } from './store'
class MenuElement extends LitElement {
constructor() {
super()
this.page = 0;
this.ninjas = ['Ninja1', 'Ninja2', 'Ninja3']
this.log()
}
static get properties() {
return {
page: {
type: Number
},
header: String,
ninjas: Array,
store: {
type: Object,
page: {
type: Number
}
}
}
}
render() {
return html`
<style>
/* :host {
border: solid 10px blue;
} */
::slotted(h3) {
border: solid 1px red
}
</style>
<div>
<ul>
<li @click="${ (e) => { this.changePage2(e) } }">Home</li>
<li @click="${ (e) => { this.changePage(e) } }">Page</li>
</ul>
<ul>
${this.ninjas.map(i => html`<li>${i}</li>`)}
</ul>
</div>
<iron-pages selected="${ store.page }">
<slot name="lala"></slot>
<div><slot name="testSlot"></slot> Page 0</div>
<main-view></main-view>
</iron-pages>
`;
}
changePage() {
store.page = 1;
console.log(store.page)
}
changePage2() {
store.page = 0;
console.log(store.page)
}
log() {
console.log(store)
console.log(store.page)
}
}
customElements.define('app-menu', MenuElement);
and b store.js
export let store = {
page: 1
}
thank You for any ideas =)
javascript polymer-starter-kit polymer-3.x lit-element
asked Nov 21 at 22:16
brackets web
32
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 at 22:18
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 at 22:23
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
Ya this isn't the way to do it if you want changes tostorein this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.
– pmkro
Nov 21 at 22:40
|
show 3 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
i try to use in lit-elements a external js file for init values but if i do so, it isnt changebel anymore via property binding. if i write it without the extanal storage file just use this. scope and declare it in the constructor, everything works fine. But as an external file not ... ?:/
but why?
i have two files menu.js:
import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-pages/iron-pages.js';
import './main.js'
import { store } from './store'
class MenuElement extends LitElement {
constructor() {
super()
this.page = 0;
this.ninjas = ['Ninja1', 'Ninja2', 'Ninja3']
this.log()
}
static get properties() {
return {
page: {
type: Number
},
header: String,
ninjas: Array,
store: {
type: Object,
page: {
type: Number
}
}
}
}
render() {
return html`
<style>
/* :host {
border: solid 10px blue;
} */
::slotted(h3) {
border: solid 1px red
}
</style>
<div>
<ul>
<li @click="${ (e) => { this.changePage2(e) } }">Home</li>
<li @click="${ (e) => { this.changePage(e) } }">Page</li>
</ul>
<ul>
${this.ninjas.map(i => html`<li>${i}</li>`)}
</ul>
</div>
<iron-pages selected="${ store.page }">
<slot name="lala"></slot>
<div><slot name="testSlot"></slot> Page 0</div>
<main-view></main-view>
</iron-pages>
`;
}
changePage() {
store.page = 1;
console.log(store.page)
}
changePage2() {
store.page = 0;
console.log(store.page)
}
log() {
console.log(store)
console.log(store.page)
}
}
customElements.define('app-menu', MenuElement);
and b store.js
export let store = {
page: 1
}
thank You for any ideas =)
javascript polymer-starter-kit polymer-3.x lit-element
asked Nov 21 at 22:16
brackets web
32
i try to use in lit-elements a external js file for init values but if i do so, it isnt changebel anymore via property binding. if i write it without the extanal storage file just use this. scope and declare it in the constructor, everything works fine. But as an external file not ... ?:/
but why?
i have two files menu.js:
import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-pages/iron-pages.js';
import './main.js'
import { store } from './store'
class MenuElement extends LitElement {
constructor() {
super()
this.page = 0;
this.ninjas = ['Ninja1', 'Ninja2', 'Ninja3']
this.log()
}
static get properties() {
return {
page: {
type: Number
},
header: String,
ninjas: Array,
store: {
type: Object,
page: {
type: Number
}
}
}
}
render() {
return html`
<style>
/* :host {
border: solid 10px blue;
} */
::slotted(h3) {
border: solid 1px red
}
</style>
<div>
<ul>
<li @click="${ (e) => { this.changePage2(e) } }">Home</li>
<li @click="${ (e) => { this.changePage(e) } }">Page</li>
</ul>
<ul>
${this.ninjas.map(i => html`<li>${i}</li>`)}
</ul>
</div>
<iron-pages selected="${ store.page }">
<slot name="lala"></slot>
<div><slot name="testSlot"></slot> Page 0</div>
<main-view></main-view>
</iron-pages>
`;
}
changePage() {
store.page = 1;
console.log(store.page)
}
changePage2() {
store.page = 0;
console.log(store.page)
}
log() {
console.log(store)
console.log(store.page)
}
}
customElements.define('app-menu', MenuElement);
and b store.js
export let store = {
page: 1
}
thank You for any ideas =)
javascript polymer-starter-kit polymer-3.x lit-element
javascript polymer-starter-kit polymer-3.x lit-element
asked Nov 21 at 22:16
brackets web
32
asked Nov 21 at 22:16
brackets web
32
asked Nov 21 at 22:16
brackets web
32
asked Nov 21 at 22:16
brackets web
32
asked Nov 21 at 22:16
brackets web
32
32
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 at 22:18
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 at 22:23
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
Ya this isn't the way to do it if you want changes tostorein this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.
– pmkro
Nov 21 at 22:40
|
show 3 more comments
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 at 22:18
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 at 22:23
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
Ya this isn't the way to do it if you want changes tostorein this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.
– pmkro
Nov 21 at 22:40
Why not just set
this.page = 1 in the constructor? Or this.page = store.page?– pmkro
Nov 21 at 22:18
Why not just set
this.page = 1 in the constructor? Or this.page = store.page?– pmkro
Nov 21 at 22:18
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
I would just do
this.page = store.page in the constructor.– pmkro
Nov 21 at 22:23
I would just do
this.page = store.page in the constructor.– pmkro
Nov 21 at 22:23
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
Ya this isn't the way to do it if you want changes to
store in this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.– pmkro
Nov 21 at 22:40
Ya this isn't the way to do it if you want changes to
store in this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.– pmkro
Nov 21 at 22:40
|
show 3 more comments
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421210%2flit-elements-external-js-file-as-storage-changed-by-a-property-data-binding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421210%2flit-elements-external-js-file-as-storage-changed-by-a-property-data-binding%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why not just set
this.page = 1in the constructor? Orthis.page = store.page?– pmkro
Nov 21 at 22:18
the point is i try to do the same like redux is doing and so i try to build a dynamic menu so that i have for changes just to edit 1 file and not the view and the controller.
– brackets web
Nov 21 at 22:22
I would just do
this.page = store.pagein the constructor.– pmkro
Nov 21 at 22:23
yes for the menu it works fine thanks!!! haven't seen that idea. but this isn't working for changes between different views, like redux (what my actually target is) is doing.
– brackets web
Nov 21 at 22:34
Ya this isn't the way to do it if you want changes to
storein this view to affect another. In each view they will have their own version of store. You will need to create a higher order component that passes the same reference to both places. Redux stores are (essentially) a function that stores an object and has prescribed methods for interacting with it.– pmkro
Nov 21 at 22:40