Create components at runtime

[shammasov-max]

Hello.
Visual Studio 2013/ typescript 1.5

• I just create object at runtime this way:
  var el:any = document.createElement('login-form');
document.appendChild(el);
  is there ay way use strictly typed objects like this ?
  var el:LoginForm = new LoginForm();
document.body.appendChild(el); // Argument of type 'LoginForm' is not assignable to parameter of type 'Node'.
• I don't wont put any line of java script in html templates, and manage all the code with types in TS
  How I can access the Class instance associated with dom-element like:
  var el:any = document.createElement('login-form');
el['login-form.ts-Scope?'].dataProvider = data;
el['login-form.ts-Scope?'].addEventListener("loginTriggered", myHandler);
• Also is there any possible issues with initialization of "model" in case of property set?

Great thanks for this repo!

[nippur72]

Hi,

1. the wrong type is a temporary issue, we are waiting for this issue to be solved in TypeScript. When it will be fixed, your "el" will be an extension of type HTMLElement and you will be able to do DOM operations with it.

In the while, just use cast operators. Please note that the correct way is:

var el = LoginForm.create(); // not new LoginForm()
document.body.appendChild(el);

that is, use the create method to create instances of the element, as normal new isn't enough.

// the two are equivalent
var el = document.createElement('login-form');
var el = LoginForm.create();

your el is both of type LoginForm and HTMLElement, the problem is that it doesn't have a type annotation stick to it.

Use cast operator:

var el:LoginForm = <any> LoginForm.create();

// ... once your element is attached to DOM and initialized ...

el.myproperty = "hello";  // works because el is of type "LoginForm"
(<HTMLElement>el).addEventListener("loginTriggered", myHandler); // cast el
to HTMLElement

3. Can you please specify what do you mean with

Also is there any possible issues with initialization of "model" in case of property set?

Unfortunately Polymer doesn't allow property getters and setters, so for
now they are not supported.