CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
es_code
es_code

Reputation: 390

templateInstance.model in Polymer 1.0

In polymer 0.5, this.templateInstance.model provided a way of accessing properties defined in the scope of an encompassing is="auto-binding" (or any other) template of this element.

Now, in polymer 1.0 what is the equivalent way of accessing properties of the encompassing is="dom-bind" (or any other) template?

EDIT:

For example, in the snippet below both elements <my-el-a> and <my-el-b> intend to set values to the encompassing <template is="dom-bind">'s counterA and counterB properties respectively.

<my-el-b> does so succesfully via a reflective property counter (notify:true).

<my-el-a> intends to do so via the "parent"/templateInstance.model but fails. This used to work in Polymer 0.5. How can I get this to work in Polymer 1.0? In other words, what's the equivalent for templateInstance.model?

<script>
  ! function() {
    var counterA = 0;
    Polymer({
      is: 'my-el-a',
      ready: function() {
        counterA += 1;
        this.instanceTemplate.model.counterA = counterA; //used to work in Polymer 0.5
      }
    })
  }();
</script>

<script>
  ! function() {
    var counterB = 0;
    Polymer({
      is: 'my-el-b',
      properties: {
        counter: {
          value: 0,
          type: Number,
          notify: true
        }
      },
      ready: function() {
        counterB += 1;
        this.counter = counterB;
        console.log(this);
      }
    })
  }();
</script>

<template is="dom-bind">
  <div>CounterA: <span>{{counterA}}</span>
  </div>
  <div>CounterB: <span>{{counterB}}</span>
  </div>
  <my-el-a></my-el-a>
  <my-el-b counter="{{counterB}}"></my-el-b>
</template>

Upvotes: 1

Views: 1379

Answers (4)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

Just assigning any property and binding to it should work, like done in the dom-bind tests - https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/test/unit/dom-bind.html#L30 - https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/test/unit/dom-bind.html#L65 assign and bind to value and notifyingvalue.

A working example at JS Bin

Upvotes: 0

es_code
es_code

Reputation: 390

It's not yet documented but evident from the source code that I can access the template instance properties from dataHost defined as:

var dataHost = (this.dataHost && this.dataHost._rootDataHost) || this.dataHost;

In the context of the example given in the question, I can replace:

this.instanceTemplate.model.counterA = counterA;

with:

var dataHost = (this.dataHost && this.dataHost._rootDataHost) || this.dataHost;
dataHost.counterA = counterA;

In other words, templateInstance.model is replaced with dataHost.

Upvotes: 3

Scott Miles
Scott Miles

Reputation: 11027

The properties defined on a <template is="dom-bind"> context are available directly on the template element itself.

What you are asking for is an anti-pattern, you should use the binding system.

If it was clearer why you wanted to avoid the binding system, maybe another answer would emerge.

Fwiw, there is no guarantee that something that used to work in 0.5 will have an analog in 1.0. The data system was completely replaced.

Upvotes: 0

DocDude
DocDude

Reputation: 2873

See:

https://www.polymer-project.org/1.0/docs/devguide/templates.html#handling-events

Although this isn't clear from the docs, I believe event.model may be added to events fired from inside the dom-bind as well. The modelForElement, itemForElement, and indexForElement methods are only available on dom-repeat, however.

I've only used those on a template repeater in the past, but if you have a good use case for having them on an autobinding template, you might want to open up a feature request.

Upvotes: 0

Related Questions