originalModel/object always updating even after variable Initialization - javascript

hello currently I am trying to populate a default model for originalModel to store the original values. the issue i'm running into is this originalModel keeps updating even after I initialized it and i have no idea why here is the only time I initialize value.
export abstract class RequestBaseComponent{
protected abstract get model(): FaspRequest; //the subClass populates this via Input()
originalModel: FaspRequest;
constructor( private formBuilder: FormBuilder
) {
}
ngOnInit() {
this.originalModel = this.model;
this.setupForm();
}
}

Maybe this is a reference issue. When you do this.originalModel = this.model; , you are actually storing the reference of this.model in this.originalModel. So when this.model is updated, this.orginalModel will be updated.
try this
this.originalModel = JSON.parse(JSON.stringify(this.model));

Related

How to initialize private property of a class for a test

I'm trying to write a test using JEST to a class I wrote with static properties that resembles the following:
class DataManager {
static #data = null;
static getData = () => {
return this.#data;
}
static initializeData = async () => {
await database(async (db) => {
const data = getSomeDataFromDatabase() //just example
this.#data = data;
});
}
}
Now, I want to make new implementation for my initializeData method, to returned some mocked data instead of going to the db, and then "getData" to see if I get the expected result. The problem is that my #data property is private and I don't want to expose it to the outside world. Is there any way to do it?
No, there is no way to do that. Private fields are really private. If you want to mock them in a test, don't use private fields. Or the other way round: if they're private (an implementation detail), you shouldn't mock them.
You need to either mock the entire DataManager class and its public methods, or if you want to test the DataManager itself then you'd mock the database and getSomeDataFromDatabase functions that it calls.

Javascript MVC: model method called inside controller returns udefined -> but why?

I have been learning javascript and I tried to use MVC. I noticed a problem and I could not find the answer to why, anywhere. The problem is following:
I have a class Model as follows in model.js:
export default class Model {
constructor() {}
speak(word) {
return word;
}
}
and controller (controller.js):
import Model from './model.js';
export default class Controller {
constructor() {
this.model = new Model();
}
speak(word) {
this.model.speak(word);
}
}
I am only explicitly writing export and import here, since I have it this way in my app and I want this example code to mimic my problem as much as possible. I have separate files for each class or component. Anyway, later, in my main AppController, I have
import Controller from './controller.js';
const controller = new Controller();
console.log(controller.speak('Hi'));
The last line always returns undefined, no matter what I return, whether it is, as in this case, a simple string, or any attribute of model class. I know, when I do this:
controller.model.speak('Hi');
Then everything is OK.
My question therefore is not how to solve it, but why is that happening?
Thank you very much for your answers.
You need to make Controller.speak return a value.
speak(word) {
return this.model.speak(word);
}
You have not returned a result from the controller speak() function.
controller.model.speak('Hi') instead of this if you write console.log(controller.model.speak('Hi')); you will see that Hi.

How to reset a form after submission using Controller As syntax

After adding an object via a form, I would like to reset the form so the user can add another. I've tried $setPristine() but can't figure out the syntax. As of now, I have just set the location path back to the same page, but that of course doesn't reset anything. Also wondering if $setPristine is the correct way. Here is my save function.
export class AddCarController {
public newCar;
public save() {
this.carService.save(this.newCar).then(() => { this.$location.path('/addCarPage') });
}
constructor(
private carService: MyApp.Services.CarService,
private $location: angular.ILocationService
) { }
}
In angular Your can create model in just in html and also in controller or on both places
If you have created Model in html
$scope.newCar = {} //this will empty whole ui model object
If you have created Model In Javascript Controller
$scope.newCar = new carModel() //this will create new car object with default values , if you have model in controller
Navigate Back And Forth - Not Recommended

TypeScript: use private or public in constructor

I'm new to TypeScript world, and I've seen examples with this to deal with injected objects and set it to a property of the component (this.anything)
First with public and setting by hand to this.nav
export class XPTO {
constructor(public nav: NavController) {
this.nav = nav;
}
}
and this, with private
export class XPTO {
constructor(private nav: NavController) {
//this.nav is nav?
}
}
in both cases after construct the object this.nav is a NavController object.
What are the differences of both implementations? Or this is the same when compiled to plain javascript?
Actually in your first example the explicit assignment is not needed at all:
export class XPTO {
constructor(public nav: NavController) {
// This line is not required.
// this.nav = nav;
this.someFunction();
}
someFunction(){
console.log(this.nav); // Prints out the NavController.
}
}
Whenever you specify public or private on a constructor parameter a corresponding public/private variable is created on the class and filled with the value of the parameter.
So really, the only difference of the two code samples is that one is private and the other one is public.
The resulting JavaScript will be the same. However, the compiler will throw an error, if you are trying to access private variables in your code.
public and private, as a lot of Typescript features, are only TypeScript modifiers. I'm not sure the compiler names these variables exactly the same, but from a JavaScript point of view, the code will be essentially the same.
The interest of Typescript is to give you features like type checking, it doesn't necessarily always modifies the outputted code.

Javascript Variable Value Get From ManagedBean Property

I have a ManagedBean with a property which gets its value from an EJB. In the JSF, I have a Javascript variable which then gets its value from the ManagedBean property. When I run the project, the Javascript variable is not set.
In the ManagedBean, I tried the below methods but doesn't work:
setting the property's value in the Constructor
setting the property's value in an init() method with the #PostConstruct annotation
setting it in the getMenuData() method.
JSF JavaScript
<script>
YAHOO.util.Event.onDOMReady(function ()) {
// Data to build the menubar
var menuData = [#{userMenu.menuData}];
...
});
</script>
ManagedBean
package com.qrra.PROFIT.web;
import javax.annotation.PostConstruct;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import qrcom.profit.ejb.UserMenuFacade;
#ManagedBean
#ViewScoped
public class UserMenuController {
public UserMenuController() {
menuData = usermenu.buildMenuDataByUserProfile("UAT");
}
// #PostConstruct
// public void init() {
// menuData = usermenu.buildMenuDataByUserProfile("UAT");
// }
public void getMenuData() {
return this.menuData;
}
public void setMenuData(String menuData) {
// usermenu.buildMenuDataByUserProfile("UAT");
this.menuData = menuData;
}
private String menuData;
#EJB
private UserMenuFacade usermenu;
}
When I view source, I only see var menuData = [];
Is there a workaround to this?
The constructor approach would fail because it's impossible to inject an EJB in the instance before the instance is constructed, you'd only face a NullPointerException as the EJB is null. The #PostConstruct approach should work fine. The business-logic-in-getter approach will also work fine, but it is plain bad design.
Provided that you're properly preforming the job in the #PostConstruct, your code looks fine. Your concrete problem suggests that usermenu.buildMenuDataByUserProfile("UAT"); just returns an empty string by itself and thus your concrete problem needs to be solved at higher level. You should already have determined it by yourself with help of a debugger and common sense.

Categories