I am experiencing one bizare problem with which you will probably not be able to help me, but I will try asking it anyway:
My Vue component does not want to update when it has specific name. When I rename it, it updates without problem.
To be precise, I named my Vue component Webinar.vue.
Here is the code for "Webinar.vue":
<template><div>test</div></template>
I display this component in browser in my Web application and it displays properly.
Now, I change test to test2 and save file and nothing happens.
But if I change the name of the component to be, for example, Webi.vue and do not change any content of the file nor anything anywhere else in the project, no config, nothing, it starts working. When I write test inside the div browser displays test, when I set test1 it displays test1 and so on.
When I change the name of the component back to the original name, update stops working again. And this is not the only name that does not work. I found a few other names that do not work, one of which is Webin.
How is this possible?
I know that you probably will not be able to help me since I did not provide minimal reproducable example, and if you ask me about the project, about the environment where is this running, I would say "it is complicated", so yea... But if one name works, just by changing the component name it should not stop working, right?
This is very bizare bug. I have very interesting environment... This component is nested within another component, that component is initialized from within the JSP file, there is Vue object created, JSP is rendered by Liferay, there is node.js involved, webpack and so on and so on. Very complex project with a lot of unusual stuff. Only way I can get this component to refresh when it has "bad name", is by restarting the node completely.
Vue in question is Vue 2.
But, how can changing the name of the component unbreak it. I do not get that.
Related
Context: Working through the Odin Project and finishing a "ToDo List" application. Trying to implement a functionality where the user will store data locally and be able to re-load data when the app is reloaded.
What I expect: I added 2 functions: saveToLocalStorage and getFromLocalStorage and expect any projects that I create to automatically reload when I refresh the page. They are stored in an object called "allProjects".
What happens instead: The first time a user creates projects, they populate as normal. However, when the page is reloaded, I'm not able to add anymore projects, AND the old projects don't populate the page. I know from console.log statements that the data is being loaded, and am parsing/stringifying the JSONS.
The really weird part: When I examine the allProjects variable in the chrome debugger (by hovering over the variable), I can see that it contains all the project objects I have been creating. However, watching that same object under "watch" it shows up as empty. And when I call it in updateProjectSidebar() as Projects.allProjects (because it is coming from a module), I hover over Projects.allProjects and it is empty there too. I figure this is probably why my sidebar won't render, since it sees nothing in that object to render.
A link to my whole code if you wish to see the whole thing in context.
I figured it out. It was a scope issue. The allProjects var was being returned before getFromLocalStorage() was run.
I have an issue regarding the script which helps me get the data from Dark Sky API.
I am developing the app in node.js using handlebars.
I am trying to get just some specific data from the forecast script, send it to app.js script which does the page routing and then to add it to forecast.hbs page.
Unfortunately, I am really stuck on this.
I have attached the photo with the code.
What I want to do is to get just some specific weather data, so, later on, I can use them one by one in the HTML code.
I have somehow to add them in the callback(right side), then in the middle, where the forecast routing is, then I think I need to replace forecastData with something else like..more variables and add those in the rendering part?
For example, I would like to take the icon variable, which contains the code that I need to add in the hbs page.
I want to do some binding by replacing Skycons.RAIN with Skycons.{{icon}}, where the icon should be in the middle file, like forecast: forecastData.
If I'm using {{forecast}}, I can show all the data that is on the right side, more exactly the variable weatherDetails, which contains the other variables.
How can I take advantage of binding and use it for the icon, for example?
Can somebody give advice, please?
I am really confused...
Kind regards, Gabriel
Why don't add an additional parameter to the callback function and then add it to the handlebars data object? Then you should have access to it in the template.
Btw are you using nodemon with docker? I'm also stuck with a problem, where nodemon isn't updating the container when the files are changed.
I am trying to add Google Cast to my music app. It works properly when I include the button and the script in the index.html file. However, when I move the button to a component, it no longer registers the button. I have tried adding this code to the components constructor as a way of delaying the load time of the cast library but it still doesn't register:
let script = window['document'].createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1');
window['document'].body.appendChild(script);
I copied this idea from the source of this npm:
https://www.npmjs.com/package/ng-cast
Any idea on how I can get the is="google-cast-button" to register late in the load process?
The most robust solution in my opinion is to add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to either your app.module.ts or feature.module.ts. By doing so, you can place the chrome cast button in your app with <google-cast-launcher></google-cast-launcher>, which is far more stable than messing with the DOM manually within your component.
I found this with react.js - if the button is created via innerHTML, then the 'is=' scripts of the web component won't run. The only way to get the scripts to run on a dynamically created button is to use the document.createElement syntax. This may mean digging in to angular to figure out how to create one that way. In react, it means waiting for componentDidMount and inserting the element into the DOM that way.
So not a BIG help, but maybe a hint of what to try next (granted it has been a few months).
I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.
I have a component in Ember2 that receives a parameter {{my-component product=p}}. I need to pre compile the component and get the generated html.
I have tried to use ember-cli-htmlbars-inline-precompile but without success. let template = hbs"{{mycomponent product=p }};
First its important to clarify the terms. Compiling a component does not mean to produce HTML! It basically means to produce a bytecode that can be used with the glimmer runtime to produce and update DOM. Ember will never produce HTML, and this is important to understand.
If you think ember produces HTML and then gives that to the browser to render you are wrong.
Ember directly produces DOM, and then keeps track of the DOM nodes to update the DOM and allow live binding.
So basically there is no public API in ember to do what you want.
Of course you can just render the component, and use this.element.outerHTML to access the HTML. But remember that with that you will lose all ember functionality like live-binding or actions.
This is especially tricky because google maps renders all into an iframe.
ember-wormhole shows that its possible to render ember content outside the main div, but they make use of private API and I think this possibility ends with the iframe.