is it possible to get component attributes?

[SiZapPaaiGwat]

i have not seen it in any official document, so may be it is a feature request?

<widget x="1" y="2" />

widget.js

var widget = Ractive.extend({
    oninit: function() {
        var options = this.getAttributes()
    }
})

this options in widget.js only get x and y without Ractive.defaults.data or any other external settings

[Madgvox]

All data attributes passed to components are set at the root level, so you can use this.get() to retrieve the root data object. Is there a scenario where you need a catch-all, instead of referring to the attributes as needed (i.e. this.get('x') or this.get('y'))?

[SiZapPaaiGwat]

@Madgvox
I have made a component which has many complicated settings:

<panel x="1" y="2" z="3">
    <!-- child compoennt -->
    <child ref="item" m="1" ... />
    <child ref="chart" n="2" ... />
</panel>

now the data object in panel will be

{
    x: 1,
    y: 2,
    z: 3,
    item: {
        m: 1
        // any other attributes
    },
    chart: {
        n:2
        // any other attributes
    }
}

so the child component need to get all the attributes to set on the parent component

[fskreuz]

so the child component need to get all the attributes to set on the parent component

There's 2 ways to do it:

In one end, you can use the {{>content}} mustache. This one follows closer to your description of "need to get all the attributes to set on the parent component". You can pass data through <panel> via attributes and inner HTML can access via the attribute names. Will rename a few properties for clarity:

<panel a="{{ x }}" b="{{ y }}" c="{{ z }}" stuff="{{ item }}" graph="{{ chart }}">
    <child ref="item" m="{{ stuff.m }}" ... />
    <child ref="chart" n="{{ graph.n }}" ... />
    <!-- also access x as "a", y as "b" and z as "c" -->
</panel>

Inside <panel>'s definition, it should have the {{>content}} mustache where you want the inner HTML in <panel> to be positioned:

<div class="panel">
  <header>...</header>
  <div>{{>content}}</div>
  <footer>...</footer>
</div>

---

The other way is to use {{yield}}. It's the same as {{>content}} except the data to be accessed by the inner HTML of <panel> doesn't need to be passed through <panel>. It can directly access the data from outside <panel>

<panel>
    <child ref="item" m="{{ item.m }}" ... />
    <child ref="chart" n="{{ chart.n }}" ... />
    <!-- can also access x, y and z directly -->
</panel>

Inside <panel>'s definition:

<div class="panel">
  <header>...</header>
  <div>{{yield}}</div>
  <footer>...</footer>
</div>

[martypdx]

@simongfxu perhaps what you are asking is how to pass a set of values. If so, a keypath expression may be what you're looking for:

<panel x="1" y="2" z="3">
    <!-- child compoennt -->
    <child ref="item" attributes="this['item']" ... />
    <child ref="chart" attributes="this['chart']" ... />
</panel>

[SiZapPaaiGwat]

@fskreuz @martypdx
Thanks for your answers.
But I think i have not expressed my intention correctly.

My really intention is to let the attributes to be more flat.
And keep these attributes in template file not in js file (more friendly to i18n and maintenance).
So I assigned some attributes to the child component and reassemble them in some time.(not a good way indeed)

Why i did in this way becasue we can not set complicated attributes directly.

Just consider the panel has an attibute named tabs, and the format is an Array like this:

var tabs = [
    {
        label: 'tab1',
        value: 'value1',
        ajaxUrl: '...',
        ajaxParams: {some other object},
        formatters:[some array]
    },
   ....
]

Attribute like tabs is complicated and we have only one way to do it:

<pane tabs="{{tabs}}" />

But I do not think this is a good way:

• not easy to see the whole settings, need to switch to js file
• more work to do in js file if we need i18n
• inflate the js file

so if wen can set attributes in this way:

<panel
    tabs.0.label="tab1"  tabs.0.value="val1"  
    tabs.0.ajaxUrl="/abc" ...  />

would it be better?

[fskreuz]

@simongfxu

And keep these attributes in template file not in js file
Just consider the panel has an attibute named tabs, and the format is an Array like this:

I think I now get it. I think you mean you want to hard-code the values in the template instead of putting it in JS. And the tabs array is the structure you want emulated.

No problem, but you still need a second component (<tab>) to make it more verbose. Either yields or content will work in this case.

<!-- General look -->
<panel>
  <tab label="label1" value="value1" ajaxUrl="ajaxUrl1" />
  <tab label="label2" value="value2" ajaxUrl="ajaxUrl2" />
  <tab label="label3" value="value3" ajaxUrl="ajaxUrl3" />
</panel>

<!-- In panel component -->
<div class="panel">{{ yield }}</div>

<!-- In tabs component -->
<div class="tab">
  <div class="label">{{ label }}</label>
  <div class="content">{{ value }}</label>
</div>

Anyways, regarding dotted attribute support, there's an ongoing thread about its support #2060. Feel free to jump in. I also suggest you take a look at the component spec for authors. There's a way to write a component with all HTML, CSS and JS in one file. That way, you don't have to resort to hard-code trickery while still keeping separation of responsibilities.

[SiZapPaaiGwat]

@fskreuz
Thank you very much! I do not know you guys are discussing it, really good.
👍

[Madgvox]

Ha, I actually opened that issue because of the experimentation I did with your issue! 😄