Defining and using custom attributes?

Showing 1-7 of 7 messages
Defining and using custom attributes? Kevin Moore 1/2/13 11:50 AM
I'd love to efficiently use <x-my-widget title="nice title" />

I've seen data-value, but this is far from ideal. Thoughts? Suggestions?

Happy to open a bug...
Re: Defining and using custom attributes? Kevin Moore 1/2/13 11:59 AM
For the moment I'm going with:

String get title => attributes['title'];

void set title(String value) {
  attributes['title'] = value;

...just wanted to make sure I wasn't missing anything.

What is the goal of the data-value model? It's much more use friendly to have custom attributes than a Hash in data-value.


Re: Defining and using custom attributes? Sigmund Cherem 1/2/13 1:04 PM
Hi Kevin,

We actually support passing values to a component using attributes in the template syntax. We haven't documented this in the spec yet, but you can do:

<x-my-widget a-field-name="{{expression}}">

if your component has a field called 'aFieldName'. When you component gets instantiated, we initialize such field with the value of the expression. The 'data-value' attribute was the old syntax we used to supported this. We use to write 'data-value="aFieldName:expression"' instead of 'a-field-name="{{expression}}". But under the hood it did the same thing.

Today we only allow passing actual expressions within bindings (that is {{expression}}). Today you can't pass constants directly in the HTML like in your example (a-field-name="constant"), but that will work in the near future.  If you want to pass a constant, you can do that with an expression like this: a-field-name="{{'constant'}}". See more details here:

One big caveat is that we will have to do something special for attribute names that are valid attributes on any HTML element. There are several attributes in this special category, including 'id', 'class', 'style', and 'title'. So in your particular example, you might need to use a different attribute name other than 'title'.



Re: Defining and using custom attributes? Kevin Moore 1/2/13 1:14 PM
Good to know, RE: title.

I'm a bit confused about the {{expression}} syntax.

Nothing special. I just want to have a 'header' attribute that maps to a property.

At the moment, I'm defining a get/set header property in the class which reads/writes the attributes['header']

How do you expect this to evolve?
Re: Defining and using custom attributes? Sigmund Cherem 1/2/13 2:05 PM
Thanks for the nice example!

We use the attribute syntax in the template, but we actually don't store the data in a DOM attribute. So what I was suggesting is basically to remove the get/set header from your class and replace it with a field, like this:

import 'package:web_ui/web_ui.dart';
class HeaderedContentComponent extends WebComponent {
  String header;

And then use an binding expression to assign a value to 'header' in app.html, as follows:

 <x-headered-content header="{{'CounterComponent'}}">

When dwc creates x-headered-content, it will assign 'header' with "CounterComponent". After we fix issue #240, you will be able to use the code as you have it written in app.html (without the extra '{{'  and '}}'). But you still need to do the change in the component class. This is actually similar to how we passed our model objects in the todomvc sample here:

Long term, there are still some additional design issues we need to figure out with respect to this feature. Web components also have the notion of attribute mutation observers, which somehow overlap with what we do here. I expect we'll see some changes in the future to make them work well together.
Re: Defining and using custom attributes? Kevin Moore 1/2/13 3:42 PM
I'm going to stick w/ my existing implementation, if only to enable a cleaner usage model.

Looking forward to 240 getting fixed.

Re: Defining and using custom attributes? Jan-Erik Vinje 4/6/13 4:26 PM
I do agree with your wish. I got used to defining custom fields in codebehind for  XAML to allow me to declaratively set some property of some custom component. It ought to be part of web components and the dart implementation of it.