README

自动连接

将javascript类与DOM节点连接，使所有内容都能无缝通信。可扩展。

状态：稳定，未完善

自动连接是稳定的，但尚未完善。我已经在生产环境中使用了一段时间。请参考 mtgpaper.me。它不是“开源”的，但您可以查看javascript源代码文件，因为它们目前未压缩或混淆（2022年4月11日）。

问题

• 没有合适的测试，可以从命令行运行
• 文档可以更好
  • 我没有记录bindParam扩展。
• API 可以更好
• 它不在npm或任何地方

未来计划

参见 Status.md ... 我没有明确计划进一步开发这个，但将来可能会这样做。它基本上能做我所需要的事情，所以...

安装

将 code/Autowire.js 复制到您的项目中，并通过以下方式包含它：

<script src="/autowire.js"></script>  

用法

有关功能示例，请参阅 test/docs/kanban/。您应该能够将 test/docs/kanban/kanban.html 加载到浏览器中

1. 创建一个类，例如 class Item extends Autowire{}。以下是一个示例类。
2. 以以下任何一种方式附加该类
   • new Item(node, ...args)
   • Item.aw()：是 Item.autowire('.Item') 的简写
   • Item.autowire('.some-css-selector')
   • const instance = Item.fromTemplate('.query-selector') 其中选择器可以指向一个 <template> 并克隆内部HTML，或者是一个非 <template> 并将节点克隆。如果 <template> 有多个直接子节点，则将这些节点包装在一个 <div> 中。

示例类

这是自动连接几乎可以做的所有事情。我没有包括关于 onReady() 的工作方式或其他一些主要内部事情的内容。

class Item extends Autowire {  
  
    /** generally, you shouldn't implement constructor */  
    constructor(node, ...args){  
        super(node,...args);  
    }  
    /** called from constructor after this.node is set   
     * @parma args are same as passed to new `Item(node, ...args);`   
     */  
    onCreate(...args){  
        this.node.innerHtml = 'whatever';  
    }  
    /** called after:  
     * - event listeners are setup   
     * - this object is added to the object map   
     * - extensions are initialized  
     */  
    onAttach(...args){  
        this.child_item = new \ChildItem(document.querySelector('.child-item'));  
        // change `this` to this class for any `on` events declared in html, such as `<button onclick="this.something()">` would now reference Item instead of the node  
        this.bindTo(this.node);  
        //this.bindToAll(node_list) will bind to a node list  
    }  
    /**  
     * called after all autowire objects are setup  
     */  
    onReady(){  
        // get all child objects of this.node. this.ga() is a shorthand  
        const children = this.getAnyList('ChildItem');  
        // get one child object of this.node. this.g() is a shorthand  
        const child = this.getAny('Child');  
  
        const parentNode = document.querySelector('something.whatever');j  
        // get all items of class name that are children of parentNode. parentNode may be null  
        const object_list = Autowire.getObjectsFromName('ClassName', parentNode);  
        // get the Autowire instance attached to the given node  
        const object = Autowire.getObjectFromNode(parentNode);  
    }  
  
    /**  
     * called when this.node is clicked. Even listeners are added for any method starting with `on`  
     *  
     * async is not required, but makes it easy to `await this.fetchJson()`  
     */  
    async onclick(event){  
        // this.fj() for shorthand  
        const new_data = await this.fetchJson('/data/',{"key":"value"}, "POST");  
        // this.ft() for shorthand  
        const new_text = await this.fetchText('/text/', {"key":"value"}, "GET");  
        const response_promise = await this.fetch(/*same params*/);  
        const other_text = response_promise.text(); //or .json() for json  
    }  
  
}  
  
// apply an extension  
Item.aw();  
  
  
class Alerter {  
    // called before onAttach() & after onCreate()  
    static onExtAttach(){  
        // `this` refers to the Autowire object being attached to  
        const node = this.node;  
        this.alert = function(msg){alert("ALERTED!!! "+msg);};  
        // basically just modify the node & the object however you want here ...  
        // such as Object.defineProperty() for ... idk, whatever  
    }  
}  
  
Autowire.expose('Alerter', Alerter);  
  
// turn all Item instances into Alerters  
Item.use(Alerter);  

PHP 集成

获取 Autowire.js 或此存储库中的另一个js文件的文件路径，并将其添加到页面中。

<?php  
$autowire_path = \Tlf\Js\Autowire::filePath();  
$modal_path = \Tlf\Js\Autowire::filePath('Modal.js');  
$bind_param_path = \Tlf\Js\Autowire::filePath('BindParam.js');  
$dropdown_path = \Tlf\Js\Autowire::filePath('addon/Dropdown.js');