and I have this wordpress project. I want to make an ember app for specific section of the website like part of the Post page or widget. but I cant get it to work or missing something. Is it possible for ember like to mount an instance to one div like vuejs can?
appreciate the help.
Yes. In the config/environment.js, you can set rootElement to any selector.
For more information, see https://guides.emberjs.com/release/configuring-ember/embedding-applications/
I think what you want is essentially ember-islands.
Related
I am trying to embed the Calendly widget into an Angular app and am not quite sure how to accomplish this. Since I will be calling this widget with variable data, I would like to invoke the widget with a user activated function. Based on the documentation and this StackOverflow I have added the following method in my component:
getEventCalender() {
Calendly.initInlineWidget({
url: myVariable.url,
parentElement: document.querySelector('.calendly-inline-widget'),
});
}
and call it with the following (in my .html)
<div>
<button (click)='getEventCalender()'>view cal</button>
</div>
<div class="calendly-inline-widget"></div>
I can see that I need the Calendly.initInlineWidget method supplied by the .js api, however I'm not quite sure how to access it. I have tried downloading the file and importing it into my component, however it didn't work (maybe I did this incorrectly). I suspect this has something to do with the .js file not exporting the method, but not sure where to go from here.
Can anyone provide some direction?
We had a similar issue in our vanilla JS app and found the solution described in their Advanced embed options documentation. We did this by:
Add data-auto-load="false" to the calendly-inline-widget div.
Add parentElement to the initInlineWidget function params.
Extra info: #remy-bartolotta we had the exact split error you described and the above info fixed it.
I maintain a web application built on VueJS+Vuetify with some AngularJS. There is a tag in a .vue file I have never seen before and cannot find any documentation on anywhere: <route-list/>
Code:
<route-list v-bind:routes="computedData" />
From what I can tell it binds a list of routes into a side bar navigation based on a computed function.
Is this some kind of depreciated Vue tag? I can't find anything on this tag whatsoever.
Are you sure it is not your own plugin?
Vue.use (<plugin>);
See more details: https://v2.vuejs.org/v2/guide/plugins.html#Using-a-Plugin
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'm using firebase as a backend and have several posts in the database. My files look like:
index.html
add-post.html
all-posts.html
How can I create routes for post-details such as /posts/id.
Do I need to use a framework such as Angular for this kind of dynamic routing?
That's correct if you want to use Angular JS UI router, I leave you the link here, the info is clear, hope it helps
https://github.com/angular-ui/ui-router
If you go to the bottom of the page you'll see that it's explained step by step.
I'm stuck in the 'Scrumptious' bookmark app created in a Tuts+ Course called 'Let's Learn Ember'. As the course is some months old, I'm trying to re-do the app using the most updated versions of Ember.js and Ember-Data.
Here's the repo: https://github.com/jantequera/scrumptious
NOTE: due to #claptimes request, I've added a jsbin of the project: http://jsbin.com/ukuDORUZ/2/edit?html,js,console
The thing is, that in the 'bookmarks' template, when I add a new bookmark, it is stored and the "create Bookmark" partial disappears, but the bookmarks table isn't updated, and it doesn't even reflect the changes in the newly created bookmark on real-time, which is the intended behaviour. In other words, I have to refresh the browser in order to see the new bookmark in the table, which is not the way an ember.js app should work.
As I am learning Ember, I might have missed or misunderstood something in the guides that explains this, so any help is welcome. Below I expose the code, if you wish to see it in context or even try it out, use the repo above. Thanks!
EDIT Anton below pointed out and advised the usage of components, which make the jsfiddle above work. However, when I use this solution in my local copy, it wouldn't work UNLESS I use the FixtureAdapter INSTEAD of the LSAdapter (local-storage). Any clue?
http://jsbin.com/ukuDORUZ/6
You use "render" helper:
{{render "table" controller.regular}}
model is not updated in "table" template when you create new bookmark and update controller.regular
you can use component (http://emberjs.com/guides/components/) and bind your model to component's parameter:
{{bookmarks-table elementsBinding="controller.regular"}}
http://jsbin.com/ukuDORUZ/6