I want to contribute to ember.js and want to make a PR for these two issues.
https://github.com/emberjs/ember.js/issues/20102 https://github.com/emberjs/ember.js/issues/19896
However, I am not able to find the documentation in the repo. My assumption is that the documentation is built from the source files. Could anyone please guide me on what should I be looking into?
I am new to ember.js and wanna know what's the best way to alter @tracked variable in child component.
Assume this structure:
Parent
--- Component1
Parent controller
@tracked
number = 1
Parent.hbs
<Component1 @number= />
Component1.hbs
<button > Add </button>
Component1.js
@tracked
number = this.args.number
@action
addNumber(){
this.number += 1;
console.log(this.number)
}
The number did addon in the Component1 and print the number every time I clicked the Add button, however, it didn't reflect to Parent level.
Can you please tell me what features of the EmberJS framework should be considered when switching to it from React?
I have been working on an e-Commerce project. I tried to implement a cart feature in which the data of the product is fetched from the backend. But when I try to display the items in the cart, the quantity of the products from the database are displayed.
I use ember-local-stoage addon to store the id of the product, then with the help of the computed property I fetch the product-details from the database. But I'm unable to store the quantity of the in the inside the local storage as array of hash: [{id: 2, quantity: 3}, {id: 4, quantity: 1}]. But if I try this I'm unable retrieve the id from the array of hash. Due to which the remove method also fails to work. Please someone help me with this issue.
shopping-cart service code:
// app/service/shopping-cart.js
import Service from '@ember/service';
import { computed } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { storageFor } from 'ember-local-storage';
const { service } = Ember.inject;
export default Service.extend({
session: service('session'),
store: service('store'),
currentUser: service('currentUser'),
itemsIds: storageFor('cart'),
items:computed("itemsIds.[]", function(){
const itemsIds = this.itemsIds;
if(this.get("itemsIds.length") === 0){
return [];
}
else{
const items = this.store.query('product', {id: this.get("itemsIds.content")});
return items
}
}),
addItem(itemId){
console.log(itemId);
this.get('itemsIds').addObject(parseInt(itemId));
},
remove(itemId){
this.itemsIds.removeObject(parseInt(itemId));
},
productPrice: computed.mapBy('items', 'price'),
totalPrice: computed.sum('productPrice'),
clear(){
this.get('itemsIds').clear();
}
});cart.hbs template:
<div class="container mt-5">
<h2>Shopping Cart <i class="fa-solid fa-cart-shopping"></i></h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"> Home</li>
<li class="breadcrumb-item active" aria-current="page">Shopping Cart</li>
</ol>
</nav>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<img class="product-image" src="/assests/images/.jpeg" alt="">
</div>
<div class="col">
<h3></h3>
<h4><span>Price: </span>Rs </h4>
<p>Qty: </p>
<button class="btn btn-danger" >Remove Item</button>
</div>
</div>
</div>
</div>
<section class="w-50 ml-auto mb-5 mt-4">
<div class="row">
<span class="col price-title">Total</span>
<span class="col price-amount">Rs. </span>
</div>
</section>
<button type="button" class="btn btn-success"> Checkout</button>
<button class="btn btn-warning" >Clear Cart</button>
</div>products controller(ember) code:
// app/controllers/product.js
import Controller from '@ember/controller';
import { computed } from '@ember/object';
import { getOwner } from '@ember/application';
const { service } = Ember.inject;
export default Controller.extend({
session: service('session'),
currentUser: service('currentUser'),
shoppingCart: service('shoppingCart'),
quantity: 1,
price: 0,
dialogBox: false,
actions:{
addToItem(model){
const id = model.id;
const quantity = this.quantity;
this.shoppingCart.addItem(id);
},
order(){
var self = this;
function setPrice(){
self.set('price', (self.model.price * self.quantity));
}
this.set('dialogBox', true);
const user_id = this.currentUser.user;
let date = new Date();
date.setDate(date.getDate() + 2);
const orders = this.store.createRecord('order',{
deliveryDate: date,
processing: true,
user_id: user_id
});
orders.save().then(setPrice());
},
orderItem(){
this.set('dialogBox', false);
console.log(this.model.id);
const orderItems = this.store.createRecord('order-item', {
quantity: this.quantity,
product_id: this.model,
price: this.quantity * this.model.price
})
orderItems.save().then(function(response){
alert("Order has been placed successfully!!");
});
},
showDialog(){
this.set('dialogBox', true);
},
hideDialog(){
this.set('dialogBox', false);
},
cancel(){
}
}
});products controller(ruby on rails):
class ProductsController < ApplicationController
def index
if params[:id]
render json: Product.find(params[:id])
else
render json: Product.all
end
end
def show
render json: Product.find(params[:id])
end
def create
title = params[:product][:title]
description = params[:product][:description]
price = params[:product][:price]
quantity = params[:product][:quantity]
Product.create!(
title: title,
description: description,
price: price,
quantity: quantity,
)
end
end
product.hbs
<div class="container mt-5">
<div class="row">
<div class="col">
<i class="fa-solid fa-arrow-left fa-2x"></i>
</div>
<div class="col">
<h1>Product details</h1>
</div>
<div class="col">
<i class="fa-solid fa-cart-shopping fa-2x">
<span class="cart-items-count-product d-inline-flex justify-content-center align-items-center">
</span>
</i>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img class="product-image" src="/assests/images/.jpeg" alt="">
</div>
<div class="col-sm-6">
<h1></h1>
<button class="btn btn-success" >
<i class="fa-solid fa-cart-shopping"></i>
<span>Add to Cart</span>
</button>
<label class="quantity-label" for="quantity">Quantity Selector:</label>
"> --}}
</div>
</div>
</div>
<hr>
<h4> Description</h4>
<div class="container">
<p></p>
<ul>
</ul>
</div>
<button class="btn btn-success" >Order now</button>
</div>
<div class="dialog-container ">
<div class="dialog">
<h5></h5>
<h5>The price is </h5>
<h5 class="confirmation">Are you sure, you wanna place this order?</h5>
<h5>Quantity: </h5>
<div class="dialog-buttons">
<button class="btn btn-success">
<i class="fa-solid fa-badge-check"></i>Yes
</button>
<button class="btn btn-danger">Cancel</button>
</div>
</div>
</div>I am trying to add Intl polyfill to an ember app, but have run into the issue that I need to add a script tag that executes async functions before evaluating other script tags.
In ember I can add a new <script> tag to index.html, that is placed before the emberjs tags:
<body>
<script src="assets/polyfills.js"></script>
<script src="assets/vendor.js"></script> <-- this throws an exception if polyfill is not loaded for iOS < 14
</body>
Everything works fine when assets/polyfills.js looks like this:
import '@formatjs/intl-locale/polyfill';
However, the issue then is that the polyfill is loaded for all devices - no matter if needed or not. But according to the docs there is way to check wether the polyfill is actually needed https://formatjs.io/docs/polyfills/intl-locale/:
import {shouldPolyfill} from '@formatjs/intl-locale/should-polyfill'
async function polyfill() {
// This platform already supports Intl.Locale
if (shouldPolyfill()) {
await import('@formatjs/intl-locale/polyfill')
}
}
The problem now is, that I am dealing with an async function and I can't find a way to load the polyfill before any other js code is executed.
I have tried to modify polyfills.js to use top level awaits and enabled the experimental webpack feature topLevelAwait: true, but subsequent code is executed before the polyfill is loaded:
await import('@formatjs/intl-getcanonicallocales/polyfill');
I also tried to wrap it in a function, but that also didn't change anything:
async function load() {
await import('@formatjs/intl-locale/polyfill');
};
await load();
I also tried things like this, which had exactly the same effect:
(async () => {
await import('@formatjs/intl-locale/polyfill');
})();
Pretty much the thing that I need would look like this:
if (shouldPolyfill) {
import '@formatjs/intl-locale/polyfill';
}
However, that is not valid and leads to this error: An import declaration can only be used at the top level of a module.
How do I solve that issue?
I have been working on e-commerce project. As a part of this project I have to implement a add to cart feature. My frontend is ember and backend is rails-api. I have used computed property to implement this, but all data from database get displayed in the cart page. How to implement a proper cart using ember?
Ember version is 3.4.4 Rails version is 7.0.2.3
// app/services/shopping-cart.js
import Service from '@ember/service';
import { computed } from '@ember/object';
const { service } = Ember.inject;
export default Service.extend({
session: service('session'),
store: service('store'),
currentUser: service('currentUser'),
itemsIds: [],
items:computed("itemsIds.[]", function(){
const itemsIds = this.itemsIds;
return this.store.query('product', {id: itemsIds.id});
}),
addItem(itemId){
this.itemsIds.addObject(itemId);
},
removeItem(itemId){
this.itemsIds.removeObject(parseInt(itemId));
}
});// app/routes/product.js
import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
const { service } = Ember.inject;
export default Route.extend(AuthenticatedRouteMixin, {
session: service('session'),
currentUser: service('currentUser'),
model(params){
return this.store.findRecord('product', params.product_id);
}
});// app/controllers/product.js
import Controller from '@ember/controller';
const { service } = Ember.inject;
export default Controller.extend({
session: service('session'),
currentUser: service('currentUser'),
shoppingCart: service('shoppingCart'),
quantity: 1,
price: 0,
dialogBox: false,
actions:{
addToItem(model){
const id = model.id;
this.shoppingCart.addItem(id);
},
order(){
var self = this;
function setPrice(){
self.set('price', (self.model.price * self.quantity));
}
this.set('dialogBox', true);
const user_id = this.currentUser.user;
let date = new Date();
date.setDate(date.getDate() + 2);
const orders = this.store.createRecord('order',{
deliveryDate: date,
processing: true,
user_id: user_id
});
orders.save().then(setPrice());
},
orderItem(){
this.set('dialogBox', false);
console.log(this.model.id);
const orderItems = this.store.createRecord('order-item', {
quantity: this.quantity,
product_id: this.model,
price: this.quantity * this.model.price
})
orderItems.save().then(function(response){
alert("Order has been placed successfully!!");
});
},
showDialog(){
this.set('dialogBox', true);
},
hideDialog(){
this.set('dialogBox', false);
},
cancel(){
}
}
});
<div class="container mt-5">
<div class="row">
<div class="col">
<i class="fa-solid fa-arrow-left fa-2x"></i>
</div>
<div class="col">
<h1>Product details</h1>
</div>
<div class="col">
<i class="fa-solid fa-cart-shopping fa-2x"></i>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img class="product-image" src="/assests/images/.jpeg" alt="">
</div>
<div class="col-sm-6">
<h1></h1>
<button class="btn btn-success" >
<i class="fa-solid fa-cart-shopping"></i>
<span>Add to Cart</span>
</button>
<label class="quantity-label" for="quantity">Quantity Selector:</label>
"> --}}
</div>
</div>
</div>
<hr>
<h4> Description</h4>
<div class="container">
<p></p>
<ul>
</ul>
</div>
<button class="btn btn-success" >Order now</button>
</div>
<div class="dialog-container ">
<div class="dialog">
<h5></h5>
<h5>The price is </h5>
<h5 class="confirmation">Are you sure, you wanna place this order?</h5>
<h5>Quantity: </h5>
<div class="dialog-buttons">
<button class="btn btn-success">
<i class="fa-solid fa-badge-check"></i>Yes
</button>
<button class="btn btn-danger">Cancel</button>
</div>
</div>
</div>// app/controller/cart.js
import Controller from '@ember/controller';
const { service } = Ember.inject;
export default Controller.extend({
session: service('session'),
currentUser: service('currentUser'),
shoppingCart: service('shopping-cart'),
});class ProductsController < ApplicationController
def index
if params[:id]
render json: Product.find(params[:id])
else
render json: Product.all
end
end
def show
render json: Product.find(params[:id])
end
def create
title = params[:product][:title]
description = params[:product][:description]
price = params[:product][:price]
quantity = params[:product][:quantity]
Product.create!(
title: title,
description: description,
price: price,
quantity: quantity,
)
end
def update
end
end
I am not able to ember serve on git bash. I am not sure what the conflict is. Any ideas? Below is the error message that pops up.
Hailey@DESKTOP-5FJ8TB1 MINGW64 ~/OneDrive/desktop/myproject/project-brownie (feature/sunshinne24|MERGING) $ ember serve Cannot find module 'C:\Users\Hailey\OneDrive\desktop\myproject\project-brownie\node_modules@babel\helper-environment-visitor\node_modules@babel\types\lib\index.js'. Please verify that the package.json has a valid "main" entry
Stack Trace and Error Report: C:\Users\Hailey\AppData\Local\Temp/error.dump.a61b5896249cc6fe897d1bcbceaf1816.log
I have recently upgraded my servers wrapper version to 3.5.49 and my fonts in the html ui has disrupted. I see the below warnings in the console -
OTS parsing error: Failed to convert WOFF 2.0 font to SFN
When i revert back to 3.5.15 wrapper version, everything works well.