Lit-Elements external js file as storage changed by a property data binding
0
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 '18 at 22:16
brackets webbrackets web
32
|
show 3 more comments
0
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 '18 at 22:16
brackets webbrackets web
32
1
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 '18 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 '18 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 '18 at 22:23
1
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 '18 at 22:40
1
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45
|
show 3 more comments
0
0
0
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 '18 at 22:16
brackets webbrackets 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 '18 at 22:16
brackets webbrackets web
32
asked Nov 21 '18 at 22:16
brackets webbrackets web
32
asked Nov 21 '18 at 22:16
brackets webbrackets web
32
asked Nov 21 '18 at 22:16
brackets webbrackets web
32
asked Nov 21 '18 at 22:16
brackets webbrackets web
32
32
1
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 '18 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 '18 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 '18 at 22:23
1
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 '18 at 22:40
1
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45
|
show 3 more comments
1
Why not just setthis.page = 1in the constructor? Orthis.page = store.page?
– pmkro
Nov 21 '18 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 '18 at 22:22
I would just dothis.page = store.pagein the constructor.
– pmkro
Nov 21 '18 at 22:23
1
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 '18 at 22:40
1
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45
1
1
Why not just set
this.page = 1 in the constructor? Or this.page = store.page?– pmkro
Nov 21 '18 at 22:18
Why not just set
this.page = 1 in the constructor? Or this.page = store.page?– pmkro
Nov 21 '18 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 '18 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 '18 at 22:22
I would just do
this.page = store.page in the constructor.– pmkro
Nov 21 '18 at 22:23
I would just do
this.page = store.page in the constructor.– pmkro
Nov 21 '18 at 22:23
1
1
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 '18 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 '18 at 22:40
1
1
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45
|
show 3 more comments
0
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',
autoActivateHeartbeat: false,
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
0
active
oldest
votes
0
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.
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
1
Why not just set
this.page = 1in the constructor? Orthis.page = store.page?– pmkro
Nov 21 '18 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 '18 at 22:22
I would just do
this.page = store.pagein the constructor.– pmkro
Nov 21 '18 at 22:23
1
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 '18 at 22:40
1
You could also use the Redux helper for litElement found here
– pmkro
Nov 21 '18 at 22:45