CODEWITHSUNDEEP
javascripthtmlpolymer
LoveAndHappiness
LoveAndHappiness

Reputation: 10135

PolymerJS simple databinding. How to output properties on screen?

I'd like to output the value I have saved in my properties.

Plunker Link

This is a simple demo-element.html. And I want to just show the title.

But neither {{title}} nor {{this.title}} works.

<dom-module id="demo-element">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <h1>'title' in properties not showing</h1>
        <h2>{{this.title}}</h2>

    </template>
    <script>
        Polymer({
            is: 'demo-element',

            properties: {
                title: 'This is a regular Demo Title'
            }
        });
    </script>
</dom-module>

How do I output my properties on the screen?

I am searching for the equivalent of vue's {{ $data | json }}

Plunker Link Again

Upvotes: 0

Views: 40

Answers (2)

LoveAndHappiness
LoveAndHappiness

Reputation: 10135

One possible solution is to assign a value property to my title property like this:

<dom-module id="demo-element">
<template>

    <h1>'title' in properties not showing</h1>
    <h2>{{this.title}}</h2>

</template>
<script>
    Polymer({
        is: 'demo-element',

        properties: {
            title: {
                 type: String,
                 value: 'This is a regular Demo Title'
            }
        }
    });
</script>

And then output the value referencing just the title, without the this, like this:

<h2>{{ Title }}</h2>

Here is the working Plunker:

Plunker Link

I still wonder if there is an alternative to vue's {{ $data | json }} method?

Upvotes: 0

Neil John Ramal
Neil John Ramal

Reputation: 3734

this is implied when data-binding. So this

<h2>{{this.title}}</h2>

becomes this

<h2>{{title}}</h2>

Upvotes: 1

Related Questions