So in Ember Octane there are two ways of attaching a function to an event in an hbs file.
The EmberJS way:
Classic HTML way: onclick=
Here they suggest using the prior syntax
However I don't see a reason why to use that syntax unless we have due reason to do so.
What are the reasons I would use the former over the latter?
I am using ember-cli-chart which is a wrapper for chart js. I am trying to disable the tooltips.
I have tried the following code but it does nothing:
chartData: computed('model', function() {
return {
labels: ['1', '2'],
datasets: [{
label: 'Example Label',
data: [this.model.example1, this.model.example2],
options: {
tooltips: {
enabled: false,
}
}
}]
}
}),
Why does this not disable the tooltips?
I have tried and search how I and deploy emberjs app on AWS Elastic Beanstalk but I can not find a way. I am using EB CLI for deployment and configuration.
If anyone has an experience in deployment of ember app to Elastic Beanstalk please share.
I am trying to extend the hide method of the Bootstrap modal plugin. I have many modals throughout the application and I would like to have a blanket solution to close the modal when a user hits the browser back button (instead of having to add the function to each modal instance in the application)
I know in Ember JS, you can override a component by importing it, calling the super method and adding your own customization. How can I do this with a Bootstrap modal plugin? I am not familiar with how to import the node_modules file in this scenario.
Essentially, what I want to do is this as a solution for all modals in the application:
$(window).on('popstate', function() {
$('.modal').modal('hide');
});
I am currently converting some code from older Ember style to Ember Octane, so I'm a bit new to Octane. At the heart of the problem, I'd like to use this.element.appendChild to append a div when the element is inserted, and then select and append an SVG to the div and modify it from there. However, Ember Octane doesn't allow for lifecycle hooks. What's the best way to do this?
For some more detail, this component utilizes D3 to render a graph, so it initializes the setup for the graph by creating a div with the id svg and then selects it and appends an SVG to it, and continues to do D3 stuff to it to render a graph.
I've looked into ember-render-modifiers, but this seems like a bit of a workaround and a copout from refactoring the code, so I was wondering if there was a better way than this.
I encountered this problem while upgrading from Ember 3.12 to Ember 3.20. Originally, whenever ember serve was running, any changes to the code would also trigger the linting scripts to re-run. I've looked at some Ember pull requests and it seems some of the linting libraries were swapped which may have had an adverse side-effect of not causing the linting tool to run on either ember serve, or ember test. Instead, linting must be called manually through the command line. This is the PR that I think maybe related to this side-effect.
https://github.com/ember-cli/ember-cli/pull/9009
Is there a way to work around this? To be clear, I want the linters to ideally run with ember serve rather than as a separate command. It's not a huge deal to me, but it is a little inconvenient to have to manually run linting now.
I have created an ember application and i am running that application on node-webkit. In my application i have used node objects also like process object. So when i am trying to run my ember test "ember test --server --module='Unit | Route | application'" it runs the test in chrome which gives error that process is not defined. And when i open http://localhost:7375/ in node-webkit it works fine. So how can i run my ember test case in a headless node-webkit. I mean i have to run my ember test in an docker container, so how can i achieve this by using node-webkit and get the test report.
And is there any way we can provide nw option in testem.js file
module.exports = {
test_page: 'tests/index.html?hidepassed',
disable_watching: true,
launch_in_ci: [
'Chrome'
],
launch_in_dev: [
'Chrome'
],
browser_args: {
Chrome: {
ci: [
// --no-sandbox is needed when running Chrome inside a container
process.env.CI ? '--no-sandbox' : null,
'--headless',
'--disable-dev-shm-usage',
'--disable-software-rasterizer',
'--mute-audio',
'--remote-debugging-port=0',
'--window-size=1440,900'
].filter(Boolean)
}
} };
I have a video section in my ember application using the following component
<video class="className" >
<source = type="video/mp4" >
</video>
This video works in any desktop browser, and on Android. However on iOS (any browser) it doesn't load at all, just leaving a blank, white container.
I'm familiar with iOS videos needing the network response as a 206 code, and that has already been taken care of.
Are there any other weird things with iOS browser video that I'm missing or need to include?
I'm using composable helpers in Ember. When I click the parent checkbox, all of the children checkboxes check and uncheck, but the parent never shows a checkmark. What am I missing here?
Parent: <input type="checkbox" checked= >
Children: <input type="checkbox" checked=>
I am using ember framework for my frontend application, It wors fine till last week now when I tried to build the application getting below issue,
Build failed.
Build Canceled: Broccoli Builder ran into an error with `UglifyWriter` plugin. 💥
SyntaxError: Unexpected token: name (v)
Error
at new JS_Parse_Error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)
at js_error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)
at croak (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2092:9)
at token_error (eval at <anonymous> (/Users/vad/dev/book-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2100:9)
at unexpected (eval at <anonymous> (/Users/vad/dev/content-frontend/node_modules/broccoli-uglify-sourcemap/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2106:9)
Please find the below package.json for your reference
{
"name": "book-content",
"version": "0.0.0",
"description": "Book management platform",
"private": true,
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"repository": "",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"broccoli-asset-rev": "^2.2.0",
"broccoli-funnel": "^1.0.2",
"broccoli-merge-trees": "^1.1.1",
"bson": "^4.0.4",
"ember-ajax": "0.7.1",
"ember-aupac-typeahead": "3.1.0",
"ember-browserify": "^1.2.2",
"ember-can": "^0.8.1",
"ember-cli": "2.13.0",
"ember-cli-app-version": "^1.0.0",
"ember-cli-autocomplete-input": "1.1.0",
"ember-cli-babel": "^5.1.5",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-htmlbars": "^1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-moment-shim": "^3.7.1",
"ember-cli-pace": "0.1.0",
"ember-cli-pagination": "2.2.2",
"ember-cli-qunit": "^1.2.1",
"ember-cli-release": "0.2.8",
"ember-cli-sass": "^7.1.7",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-composable-helpers": "2.1.0",
"ember-concurrency": "0.8.21",
"ember-data": "2.7.0",
"ember-disable-proxy-controllers": "^1.0.1",
"ember-export-application-global": "^1.0.4",
"ember-get-helper": "1.1.0",
"ember-load-initializers": "^0.5.0",
"ember-lodash": "4.17.1",
"ember-moment": "^7.8.0",
"ember-plupload": "1.13.18",
"ember-power-select-typeahead": "0.7.1",
"ember-query-params-reset": "2.0.0",
"ember-resolver": "^2.0.3",
"ember-rl-month-picker": "^0.2.0",
"ember-rl-year-picker": "^0.2.0",
"ember-slide-push-menu": "1.0.0",
"ember-truth-helpers": "1.2.0",
"ember-uploader": "1.0.0",
"ember-validations": "v2.0.0-alpha.5",
"express": "^4.13.4",
"glob": "^4.5.3",
"loader.js": "^4.0.0",
"morgan": "^1.7.0",
"uglify-js": "2.7.1"
},
"dependencies": {
"minimist": "^1.2.0"
}
}
I see some of the dependencies pulled the latest version of uglify:3.11.3 which could cause an issue but I don't know how to instruct them to use version 2.7.0 or the one which is not causing an issue. I don't know how to override nested dependency.
Could anyone please guide me to fix the issue?
I have a scenario where I want to append child component say child-component to a different component dynamically. example - I want to achieve
<div class="container">
<div class="content">
<child-component></child-component>
</div>
</div>
I am using document.querySelector('.container .content').appendChild('this.element.querySelector('[data-child-content]')) in child-component.js file.
I want to use https://github.com/DockYard/ember-maybe-in-element addon to achieve this appendChild. Any suggestions on how to achieve this in the above scenario?
I am learning Ember.js. I was working on a component class
Here my code:
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking'
export default class TodoListComponent extends Component {
@service todoData;
@tracked canToggle = true;
get areAllComplete() {
let **{todos}** = this.args;
return todos.every(todo => {
return todo.isCompleted;
});
}
}
Can anyone tell me What is the difference between let todos = this.args; and let { todos } = this.args; in JavaScript ?
I am trying to access a DOM element from my main page and want to update the CSS. I use the following;
var myIframeContainerEl = $('#myIframeContainerEl');
myIframeContainerEl.contents().find(".required").css("color", "#f0f0f0");
This is not working for some reason. While it is able to find "myIframeContainerEl", for some reasons, "myIframeContainerEl.contents()" shows a length of 0. Is the above not the correct way of doing it?
Also, just to add, I am using this in my Ember project and use it within didTransition hook and inside "afterRender" So the element is present when I am trying to access.
My application.js controller has @actions for sending POST requests, and I want to take the json payload response from one of these actions, and use that json payload in my .hbs file called application.hbs.
@action async myFunctionn() {
let response = await fetch(url, {
method: 'POST',
headers:{'Content-Type':'application/vnd.api+json'},
},
body:JSON.stringify(payload)});
let json = await response.json();
return;
}
How can I most simply do this.
I have my applicationController where I have the following
@action getTable(){
//code to get info when button is pressed
}
@action getRequest(){
//logic
let my-expression = aria + bob;
}
I want to capture the my-expression variable so that I can use it in another action decorated function. How can I do that in the most simplest way, in the same controller?
I'm using now:
ember: 3.8.1ember-data: 3.10.0I'm trying to send an error response from Grails API with some additional data. It looks something like this:
respond(
status: HttpStatus.UNPROCESSABLE_ENTITY,
errors: errors
additionalData: someMap
)
On the frontend side with Ember I'm trying to catch it with:
object.save().then(function () {
// (...)
}).catch((response) => {
// Here I want to access "response.additionalData"
// (...)
});
Now, I know that ember-data has it's own way to handle and bind errors response (https://davidtang.io/2016/01/09/handling-errors-with-ember-data.html) but in ember-data: 2.10.0 I was able to catch and handle errors with additional data in catch with response.additionalData.
In version I'm using response.additionalData is always undefined and I can't get it in any way. It's coming from backend because I can see it in browser dev tools in response.
How can I achieve this in newest ember-data? I did try to write adapter and override handleResponse function but even my own CustomErrorClass still was like native one.
Any help would be appreciated. Thanks in advance!
So in my template I need to iterate through an array of Ember data store items.
But I can't simply pump the items from the ember data store into the array, so listItems is a computed property to format the items as needed.
@computed('itemsArray', 'idx')
get listItems() {
const items = this.itemsArray;
return items.map((item, index) => {
return {
data: item.data,
visible: index === idx
};
});
}
My problem comes into initilizing the itemsArray. I need to get it from the data store, which is asynchronous, however neither a constructor or computer property can be async to await the operation. I need to setup itemsArray as an array with my first data record. Is there a way to await or wait on the promise to resolve inside a computed property (check if itemsArray is empty and if so set it up) or get it in some other way? I thought of concurrency tasks at first but forgot they need to be awaited when called too. If it matters for the store, I am using below to fetch my record (using find as I want to query for it):
await this.store.findRecord('category/items', id);
I'm working on an emberjs application that uses several other custom ember addons, in one of which we're adding a new dependency on mathjs (https://mathjs.org/) to do some expression parsing. It isn't clear though what the correct way to keep the configuration of that dependency on mathjs within only the addon that uses it is. Is there a "right" way to do this in ember?
What we ended up doing was just installing the mathjs package into our main app's node_modules, then exposing the library in the browser by doing an app.import('node_modules/mathjs/dist/math.min.js') in our ember-cli-build.js file. This is obviously non-ideal because it means that any app using the custom addon must also do this extra setup to expose this dependency of the addon.
FWIW, we initially tried to just install the mathjs dependency into the addon's node_modules, then we imported it in the component of the addon where it's used. But then the browser said that the mathjs module couldn't be imported from the addon.
So, I have a container that overflows in my component. Each item in the container references a clip to be played above. The component automatically moves through each item, playing them sequentially. However when it moves to the overflowed items, it just continues with the scroll bar staying at the default farmost left position. Is there a clean way to move the scroll bar over when a non-visible item is selected?
<div class="scroller" >
<div role="button" class="thumbnail" >
<img src= />
</div>
</div>
For context a separate component is used and passed the current item to display it above this horizontal scroll bar. I want to be able to check if the current item is not visible, and if so then get its position in the scroll bar and move the scroll position to the item's position.
I am new to d3 and am trying to create a line graph. I can't seem to properly import it, however, I get this error. I am using EmberJS, but I don't know if that is relevant.
Could not find module `d3` imported from 'filepath'.
This is my file:
import Component from '@ember/component';
import { computed } from '@ember/object';
import * as d3 from 'd3';
d3.json('URL');
export default class ComponentName extends Component {
}
I have done npm install and npm ci numerous times, and these relevant modules are in my package.json
"devDependencies": {
"@types/d3": "^5.16.3",
"d3": "^6.2.0",
}
Other modules I have installed that didn't seem too relevant:
"devDependencies": {
"@ember/optional-features": "^2.0.0",
"@glimmer/component": "^1.0.1",
"@glimmer/tracking": "^1.0.1",
"@types/ember": "^3.16.1",
"@types/ember-qunit": "^3.4.12",
"@types/ember-resolver": "^5.0.10",
"@types/ember-test-helpers": "^1.0.4",
"@types/ember-testing-helpers": "0.0.3",
"@types/ember__array": "3.0.4",
"@types/ember__test-helpers": "^1.7.3",
"@types/qunit": "^2.9.5",
"@types/rsvp": "^4.0.2",
"@types/sinon": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^1.11.0",
"@typescript-eslint/parser": "^1.11.0",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^3.1.0",
"ember-auto-import": "^1.6.0",
"ember-cli": "~3.21.2",
"ember-cli-dependency-checker": "^3.2.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^2.0.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-terser": "^4.0.0",
"ember-cli-typescript-blueprints": "^3.0.0",
"ember-cli-uglify": "^2.1.0",
"ember-disable-prototype-extensions": "^1.1.3",
"ember-export-application-global": "^2.0.1",
"ember-load-initializers": "^2.1.1",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^4.6.0",
"ember-resolver": "^8.0.2",
"ember-sinon": "^4.0.0",
"ember-sinon-qunit": "^3.4.0",
"ember-source": "~3.21.1",
"ember-source-channel-url": "^3.0.0",
"ember-template-lint": "^2.11.0",
"ember-try": "^1.4.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^5.0.0",
"eslint-plugin-ember": "^8.13.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-security": "^1.4.0",
"loader.js": "^4.7.0",
"npm-run-all": "^4.1.5",
"prettier": "^1.18.2",
"qunit-dom": "^1.4.0",
"semantic-release": "^15.13.16",
"sinon": "^7.2.2",
"typescript": "^4.0.3"
}
So my situation is as follows: I got a component with a couple of input fields that represent a contact and are filled with data from a service: @service('contact-data') contact;. Each field stands for one property that is accessed via contact.properties.
I have the properties saved as a jsObject to easily filter out empty fields when using them and I tracked it with @ tracked like so: @tracked properties = {id: 0, foo: "", bar : "abc" ,more goes here}
However, the properties do not re-render properly in the component and the textfields do not get updated.
I'd appreciate any help with this! Thanks!
In one case a template will have
in another it will have
Is there a way to make it such that the end part of the record attribute is accessed programmatically? i.e.
or
Is such a thing possible?
I get this error upon sending a request with my async function. I also tried passing in finalDescription into the async function, but no luck.
My application.js
@tracked finalDescription;
@action getDescription(description){
this.finalDescription = description;
}
@action async sendRequest() {
const cron_minutes = finalSchedule[tag].toString();
if (finalDescription[colour].length) {
mystring = mystring + "/" + finalDescription[colour].toString();
}
...
and description looks like this
description = {
colour: [1,2],
tag: [32,34,36],
era: ["modern"],
}