I have a dart server running on AppEngine and a Dart-Polymer client. The idea was to share common logic, such as the models. However, there is a little problem. Usually you would make your model-Classes extend JsProxy and than annotate all relative fields with #reflectable in order to use them in data binding. Unfortunately the model which works with AppEngine's datastore already inherits from Model. Besides that, I am not sure whether dart:js is available on the server. Hence, I have to find another way to make my model reflectable for the UI.
Annotating Project#name with #reflectable didn't work. Same empty div as output.
When including JsProxy in the model:
The built-in library 'dart:html' is not available on the stand-alone
VM.
Any ideas?
#Kind(name: 'Project', idType: IdType.Integer)
class Project extends Model {
#StringProperty(required: true)
String name;
}
#PolymerRegister('project-list')
class ProjectList extends PolymerElement {
#property List<Project> projects;
ProjectList.created() : super.created();
ready() {
fetchProjects();
}
}
<dom-module id="projects-page">
<template>
<template is="dom-repeat" items="{{projects}}">
<div>{{item.name}}</div>
</template>
</template>
</dom-module>
Output:
<div></div>
This is a known issue https://github.com/dart-lang/polymer-dart/issues/664
The best workaround so far is to use proxy objects where the annotations are applied and that wrap the shared model classes.
class FooProxy extends JsProxy implements Foo {
final Foo model;
FooProxy(this.model);
#reflectable
int get bar => model.bar;
set(int value) { model.bar = value}
}
Related
car.ts has "isNewCar" variable in "export class Car{}", and I need to export the "isNewCar" variable to another component carSale.ts which is in a different directory, and not in the same module. Do I have to add the car.ts template to the carSale.ts file and add the "isNewCar" as input?
edit: car.ts has export class Car{ isNewCar:boolean = false; } and car.ts is a component. carSale.ts is also a component but it is not in a same/shared module as car.ts I need carSale.ts, and eventually carSale.ng.html to get access to the isNewCar variable. So, can you tell me how I would use the viewChild decorator or anything else in carSale.ts to access that variable? I would ideally not want to make a shared module though but if I have to, I can.
you can extend the Car class like,
export class CarSale extends Car {
ngOnInit(){
this.isNewCar = true;
}
}
By extending the Car class, you will be able to access the isNewCar property from the CarSale class
Need some more information about the use case. Is the car.ts a component or a model ?
If the car.ts is a model you should aggregate it in your carSale.ts component or, if really necesary, make it globaly available with a service.
If car.ts is a component with his own template, then you can acces the value with the output event emitter or by using a viewChild decorator.
There are other way to share variables but the above is the more common.
car.ts :
/*
* This is a POJO
*/
export class Car{
isNew: boolean;
}
car-sale.component.ts :
export class CarSale {
car: Car; // Car is aggregate into CarSale
ngOnInit(){
car = new Car();
car.isNew = true;
}
}
car-sale.component.html
<-- just use your car object like this --!>
<div *ngIf="car">Is the car new ? {{ car.isNew }}</div>
I have a Recact component defined as:
export default class App extends React.Component<AppProps, Items>
The Items class is defined as:
export default class Items extends Array<Item>
and the Item is just a class with a bunch of properties.
If in render() I bind a list to my Items object directly ie.
<List items={myItems} onRenderCell={this._onRenderCell} />
the list is displayed correctly, however if I this.setState(myItems) and then try to get the list binded to the state:
<List items={this.state} onRenderCell={this._onRenderCell} />
I get the compile-time error:
Type 'Readonly' is missing the following properties from type 'any[]': [Symbol.iterator], [Symbol.unscopables]
How do I fix this?
I found an easy solution to this... I created a new type:
type ItemsState = {
items: Items
}
then changed my component to use that as a state instead: export default class App extends React.Component<AppProps, ItemsState>
First, I want to point out that React's patterns discourage inheritance and prefer composition
Moreover you are extending an Array while React expect an Object.
Another misconception is "bind a function to the state". You are binding this context, not to variables.
Finally, state must be serializable and you should put in it only objects and arrays or primitives.
Try to refactor your components following this guidelines or post complete code for a more comprehensive solution.
I would like to create a service which will be responsible for opening bootstrap popovers with errors and success communicates. I have two components ErrorComponent, SuccessComponent and one service called CommunicatesComponent. I would like to use this service to open popover like
service.error('some error')
service.success('success!')
And this should display popover with provided text as argument. What I am doing is setting component property in service like followed and use this property in this service:
ErrorComponent
export class ErrorComponent implements OnInit {
public text:string;
#ViewChild('errorPopover') private errorPopover: NgbPopover;
constructor(private communicatesService:CommunicatesService) {
}
public ngOnInit() {
this.communicatesService.setErrorComponent(this)
}
}
Service:
#Injectable()
export class CommunicatesService {
private errorComponent:ErrorComponent
public setErrorComponent(component:ErrorComponent) {
this.errorComponent = component;
}
public error(text:string) {
console.log(this.errorComponent)
// this.errorComponent.text = text;
}
}
Unfortunitelly, it seems that my component object is not provided well, because console log prints undefined. How it should be done?
Regards
There are two things I would change in your design
ErrorComponent and CommunicatesService depends on each other. It's good to avoid it - CommunicatesService could easily work with different components. So you could create an rx Observable public property of the service, so any component can subscribe to it. When service.success('success!'), the service will send the message text to the subscribers.
In ErrorComponent, you get the popover component as a #ViewChild. You could consider binding ErrorComponent.text to the popover directly (reversing the dependency).
These changes could solve the problems you have and make the design looser - easier to understand and maintain.
When I'm overriding a function in a child class, how can I call the parent version of that function?
Say I have two components AbstractList and SortableList in React with:
class AbstractList extends React.Component {
getItems() {
...
}
}
class SortableList extends AbstractList {
getItems() {
... do sorting first
return super.getItems(); // QUESTION: how am I supported to actually do this?
}
}
Thanks!
You should not do it this way
check this issue on github
Many people have become accustomed to using OO inheritance not just as
a tool, but as the primary means of abstraction in their application.
I've you've worked at a Java shop, you'll know what I'm talking about.
In my personal opinion, classical OO inheritance (as implemented in
many popular languages) is not often the best tool for most jobs, let
alone all jobs. But the situation should be approached with even more
caution when inheritance is used within a framework or paradigm that
uses functional composition as its primary abstraction (React). There
are certain patterns we'll want to prevent (there are many strange
things that people can come up with when combining render with
inheritance that don't make sense and are addressed via simple
composition). There's also risk of making mutation more convenient. It
might make sense to start with ES6 classes simply as a better syntax
for React component creation, intentionally limiting some use cases
(limiting inheritance depth, making some React base class methods
final) (only when used with React components of course - all non-React
use of ES6 classes wouldn't be restricted).
Instead of this
class AbstractList extends React.Component {
getItems() {
...
}
}
class SortableList extends AbstractList {
getItems() {
... do sorting first
return super.getItems();
}
}
You should do
class AbstractList extends React.Component {
getItems() {
...
}
}
class SortableList extends React.Component {
render() {
return <AbstractList items={this.props.item}>{this.props.children}</AbstractList>;
}
}
I'm trying to create a rich data model for an AngularJS application and I would like for my model to inherit from Array<BaseModel>. I haven't found a way to do this (with confidence) yet.
In pseudocode this would be something like:
// NOT REAL CODE. DOES NOT WORK
class BaseModel {}
class Person extends BaseModel {}
class People extends Array<Person> {
constructor(private promise:Promise) { }
$unwrap(promise) {
promise.then((response) => {
response.data.map((person) => {
this.push(new Person(person));
});
});
}
static $load() {
/* do some ajaxy thing and unwrap the promise right onto the
the new instance of this rich model */
return new People(promise);
}
}
The reason I would like something like this is that now I can bind this model directly to my view and get updates on the fly.
Any thoughts on extending from Array?
At this point it time it is not possible to inherit from Array in TypeScript. It is best to unwrap into a public array field and use this field to bind to the UI. It resolves into the same functionality and remove the necessity of inheriting from Array.