All geek questions in one place

HTML5 / web components: calling a function prototype from template code

I am doing several tests to use (or not) web components in a single page application that I create.

Here is an example of a problem:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<template id="aTemplate">
    <div style="border:1px solid red">
        <p>text <input type="text"></p>
        <button>ClickMe</button>
    </div>
</template>

<script>
    var Proto = Object.create(HTMLElement.prototype);

    Proto.createdCallback = function () {
        var t = document.querySelector('#aTemplate');
        var clone = document.importNode(t.content, true);
        this.createShadowRoot().appendChild(clone);
    };

    Proto.aFunction = function() {
        alert("proto " + "text value?");
    }

    document.registerElement('x-proto', {prototype: Proto});

    var ProtoChild = Object.create(Proto);

    ProtoChild.createdCallback = function () {
        Proto.createdCallback.call(this)
    };

    ProtoChild.aFunction = function() {
        alert("child " + "text value?");
    }

    document.registerElement('x-proto-child', {
        prototype: Proto
    });

</script>

<x-proto></x-proto>

<x-proto-child></x-proto-child>

</body>
Run codeHide result

The problem is that I can’t find a way to set the onclick handler in the button (inside the template) that calls the "aFunction" method in the object created using the prototype. The method must be called on the correct instance of the object, with access to the internal components of the DOM, as well as attributes and functions of the prototype.

I tried a lot of things (attaching an event after building, using JS or JQuery, using created / attached callbacks, a), but I have no ideas.

Thanks in advance.

EDIT:

Thanks to MinusFour for the answer. Line:

clone.querySelector('button').addEventListener('click', this.aFunction);
Anyway, in what I tried to do, as a result (the same, but with jQuery, for compatibility testing):
$(this.showButton).on("click", this.aFunction.bind(this));

"bind" makes the 'this' AKA container, the complete component available in the JS code that I need.

Here's the final, final example, someone might find it useful:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

<template id="aTemplate">
    <div style="border:1px solid darkgray;padding:10px;margin: 10px;">
        <h2 class="theCaption"></h2>
        <p>text <input class="theText" type="text"></p>
        <button class="showButton">Show val</button>
        <button class="closeButton">Close</button>
    </div>
</template>

<script>

    // The .bind method from Prototype.js
    if (!Function.prototype.bind) { // check if native implementation available
        Function.prototype.bind = function () {
            var fn = this, args = Array.prototype.slice.call(arguments),
                    object = args.shift();
            return function () {
                return fn.apply(object,
                        args.concat(Array.prototype.slice.call(arguments)));
            };
        };
    }

    function createProto() {
       $("#spawnPoint").append("<x-proto x-caption='proto'></x-proto>");
    }

    function createChild() {
        $("#spawnPoint").append("<x-proto-child x-caption='a child of proto'></x-proto-child>");
    }

    var Proto = Object.create(HTMLElement.prototype);

    Object.defineProperty(Proto, "x-caption", {value: "no caption"});

    Proto.createdCallback = function () {
        var t = document.querySelector('#aTemplate');
        var clone = document.importNode(t.content, true);
        this.shadowRoot = this.createShadowRoot();
        this.shadowRoot.appendChild(clone);
        $(clone).children("div").append("<p>ssss</p>")
        this.showButton = this.shadowRoot.querySelector('.showButton');
        this.closeButton = this.shadowRoot.querySelector('.closeButton');
        this.shadowRoot.querySelector('.theCaption').textContent = $(this).attr("x-caption");
        this.theText = this.shadowRoot.querySelector('.theText');
        $(this.showButton).on("click", this.aFunction.bind(this));
        $(this.closeButton).on("click", this.close.bind(this));
    };

    Proto.aFunction = function () {
        alert("in proto = " + $(this.theText).val());
    }

    Proto.close = function () {
        $(this).detach();
    }

    document.registerElement('x-proto', {prototype: Proto});

    var ProtoChild = Object.create(Proto);

    ProtoChild.createdCallback = function () {
        Proto.createdCallback.call(this);
    };

    ProtoChild.aFunction = function () {
        alert("overrided in child = " + $(this.theText).val());
    }

    document.registerElement('x-proto-child', {
        prototype: ProtoChild
    });

</script>

<button onclick="javascript:createProto()">Create proto</button>
<button onclick="javascript:createChild()">Create child</button>

<div id="spawnPoint">

</div>

</body>
Run codeHide result
+4
source share
2 answers

I believe that you can just add a listener from importedNode( clonein your case).

clone.querySelector('button').addEventListener('click', function(){
  //code logic here
});

You also probably meant:

document.registerElement('x-proto-child', {
        prototype: ProtoChild
    });

Here's how it would look:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<template id="aTemplate">
    <div style="border:1px solid red">
        <p>text <input type="text"></p>
        <button>ClickMe</button>
    </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js"></script>
<script>
    var Proto = Object.create(HTMLElement.prototype);
  
    Proto.createdCallback = function () {
        var t = document.querySelector('#aTemplate');
        var clone = document.importNode(t.content, true);
        clone.querySelector('button').addEventListener('click', this.aFunction);
        this.createShadowRoot().appendChild(clone);
    };

    Proto.aFunction = function() {
        alert("proto " + "text value?");
    }

    document.registerElement('x-proto', {prototype: Proto});

    var ProtoChild = Object.create(Proto);

    ProtoChild.createdCallback = function () {
        Proto.createdCallback.call(this);
        console.log(this.template);
        /*this.template.querySelector('button').addEventListener('click', function(){
          console.log('child');
          });*/
    };

    ProtoChild.aFunction = function() {
        alert("child " + "text value?");
    }

    document.registerElement('x-proto-child', {
        prototype: ProtoChild
    });

</script>

<x-proto></x-proto>

<x-proto-child></x-proto-child>

</body>
Run codeHide result
+2
source

I had a similar problem after a while:

http://www.davevoyles.com/accessing-member-functions-in-polymer/

Do you use Polymer at all or just web components?

, , , , .

. DOM , HTMLElement .

, ( ID, , attr ) . : http://jsbin.com/qikaya/2/edit

0

Source: https://habr.com/ru/post/1610049/

More articles:


All Articles