README

基于 webcomponents.js 的小型库，用于创建可重用 Custom Elements。

常见问题解答

• WTF？又一个 JavaScript 新框架！:(

  • 好吧，它不是一个框架，它是一个小的工具库，用于创建 Custom Elements。您可以在现有代码中使用此库（条件适用）

• 什么？Custom Elements？

  • 是的，Webcomponents.js 为 Custom Elements、HTML Imports 和 Shadow DOM 提供了 Polyfills。

• 那么，我可以用这个库与我的现有框架和代码库一起使用吗？

  • 您可以使用此库与 react.js、backbone.js 以及所有可能的框架和库一起使用。
  • 是的，您需要加载的只是 - webcomponents-lite.min.js（36KB）+ pitana.min.js（8KB）
  • WebComponents 基础知识
  • 仅支持现代浏览器。

• 但是，等等，Google 有 Polymer 用于创建可重用 Custom Elements，有很多功能。为什么不使用它呢？

  • 是的，如果您喜欢 Polymer，请使用它。但许多人希望使用 Vanilla JS 创建 Custom Elements。
  • 例如 - Mozilla 创建了 Brick（《https://github.com/mozbrick/brick》），它使用 Vanilla JS 编写
  • Pitana.js 是一个小型包装库，它为使用 Vanilla JS 创建 Custom Elements 提供了 backbone.js 类型的语法。
  • 最接近的替代库是 x-tags（《https://github.com/x-tag/core》），它具有更多功能。

• 那么有哪些功能？

  • 像 backbone 视图一样的甜语法。
  • 沙盒方法。
  • 事件总线，用于元素之间的通信。

• 我应该使用它还是不使用它？

  • 查看一些使用 pitana.js 创建的元素，如果您喜欢它们，那么就使用它们，并尝试使用 pitana.js 创建一些新的 Custom Element。

• pitana 的含义是什么？

  • 它只是一个随机创建的词。

观看视频

语法

• 是的，我们有甜语法 - 您可以将 * progress-bar 元素使用 Vanilla JS *（《https://github.com/nsisodiya/boot-progressbar/blob/gh-pages/src/boot-progressbar.js》）与使用 pitana.js 写的 * 同一个 progressbar 元素 *（《https://github.com/pitana/pt-progressbar/blob/master/src/pt-progressbar.js》）进行比较

文档

如何注册自定义元素 pitana.register

pitana.register({
    tagName: "hello-world",
    attachedCallback: function () {
        //Do something
    }
});

如何添加模板字符串 template

• 模板作为字符串

pitana.register({
    tagName: "hello-world",
    template: "<h1>This is the template string</h1>"
});

• 模板作为函数

pitana.register({
    tagName: "hello-world",
    template: function(){
        return "<h1>This is the template string</h1>"
    }
});

或

• 它也可以是一个模板节点

pitana.register({
    tagName: "hello-world",
    template: document.querySelector("template#helloworldTemplate")
});

如何监听 events

pitana.register({
    tagName: "hello-world",
    events: {
        "click button#asd":"onClickButton"
    },
    template: "<p>Hello World, Click button to See more</p><button id='asd'>Click Me<button>",
    onClickButton: function(){
        window.alert("I wish you, Very Happy New Year");
    }
});

如何使用 accessors

    <pt-stars id="mystars" count="5"></pt-stars>

pitana.register({
    tagName: "pt-stars",
    accessors: {
        count: {
            type: "int",
            onChange: "render"
        }
    },
    attachedCallback: function(){
        this.render();
    },
    render: function(){
        var str = "";
        var count = this.$.count;
        for(var i=0; i< count; i++){
            str = str + "*";
        }
        this.$.innerHTML = str;
    }
});

    window.alert("The current value of Stars are" + document.getElementById("mystars").count )

如何使用 pub/sub API 进行元素之间的通信。

元素 pt-stars 向其他元素发送信号

pitana.register({
    tagName: "pt-stars",
    accessors: {
        count: {
            type: "int",
            onChange: "render"
        }
    },
    attachedCallback: function(){
        this.render();
    },
    render: function(){
        this.publishGlobalEvent("STARS_CHANGED", this.$.count);
        var str = "";
        var count = this.$.count;
        for(var i=0; i< count; i++){
            str = str + "*";
        }
        this.$.innerHTML = str;
    }
});

pitana.register({
    tagName: "pt-notifier",
    globalEvents:{
        "STARS_CHANGED":"onChangeStars"
    },
    template:"This is just a notifier element",
    onChangeStars: function(val){
        window.alert("We have noticed that value of stars changed to " + val);
    }
});

Hello World 示例

代码可在 - 《http://jsfiddle.net/nsisodiya/qr2obwyc/》找到

任务

<hello-world name="James" count="5"></hello-world>

index.html

<h1>Pitna Hello World Element Demo</h1>
<button onclick="document.getElementById('tag').count=3">Change Count to 3</button>
<hello-world id="tag" name="James" count="5"></hello-world>

js

pitana.register({
    tagName: "hello-world",
    accessors: {
        name: {
            type: "string"
        },
        count: {
            type: "int",
            onChange: "attachedCallback"
        }
    },
    attachedCallback: function () {
        var s = [];
        for (var i = 0; i < this.$.count; i++) {
            s.push("<p>Hello " + this.$.name + "</p>");
        }
        this.$.innerHTML = s.join("");
    }
});

使用pitana.js创建的当前自定义元素列表

• pt-progressbar
  • 受Bootstrap启发的进度条
  • 演示 - http://pitana.github.io/pt-progressbar
  • 源代码 - https://github.com/pitana/pt-progressbar/blob/master/src/pt-progressbar.js
• pt-pdfslideshow
  • 基于Pdf.js的PDF幻灯片元素
  • 演示 - http://pitana.github.io/pt-pdfslideshow
• pt-steps-indicator
  • 用于步骤指示的小工具
  • 演示 - http://pitana.github.io/pt-steps-indicator
  • 源代码 - https://github.com/pitana/pt-steps-indicator/blob/master/src/pt-steps-indicator.js

如何将您的自定义元素添加到上述列表中

• 使用pitana.js创建自定义元素，并在本仓库提交一个错误报告（issue）。