<!DOCTYPE html>

<html>

    <head>

        <title>ms-attr-*</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

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

        <script>

            avalon.define("test", function(vm) {

                vm.toggle = true

                vm.aaa = "aaa"

                vm.click = function() {

                    vm.toggle = !vm.toggle

                    console.log(vm.toggle)

                }

                vm.change = function() {

                    vm.aaa = "bbb"

                }

            })

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

            XBooPrototype.detachedCallback = function() {

                console.log("remove")

            }

            XBooPrototype.attachedCallback = function() {

                console.log("add")

            }

            var XBoo = document.registerElement('x-boo-ir2', {

                prototype: XBooPrototype

            });

            window.onload = function() {

                var xboo = new XBoo()

                var body = document.body

                body.appendChild(xboo);

                body.removeChild(xboo);

            }

        </script>

        <style>

            .aaa {

                background: goldenrod;

            }

            .bbb{

                background: green;

            }

        </style>

    </head>

    <body ms-controller="test">

        <div ms-hover="{{aaa}}:toggle" ms-click="click">ddddd</div>

        <button ms-click="change">点我</button>

    </body>

</html>

chrome36可以使用自定义元素的回调了的更多相关文章

  1. KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述

    Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...

  2. 自定义元素 – 在 HTML 中定义新元素

    本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...

  3. 自定义元素–为你的HTML代码定义新元素

    注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...

  4. 使用 custom element 创建自定义元素

    很早我们就可以在 HTML 文档中写 <custome-element></custom-element> 这样的自定义名称标签.但是浏览器对于不认识的标签一律当成一个普通的行 ...

  5. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  6. angularJS 自定义元素和属性

    创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...

  7. 自定义元素 v1：可重用网络组件

    google文档 https://developers.google.cn/web/fundamentals/web-components/customelements 兼容性 https://can ...

  8. 自定义元素（custom elements）

    记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...

  9. HTML 自定义元素教程

    组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望. 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements). 文章 ...

随机推荐

  1. Cortex_M3——存储器系统学习笔记

    看完一个章节完全不做学习笔记总结并进行知识转换,看了就会忘记啊~无奈脸. 一.CORTEX_M3总线一览 二.异常 编号为1-15的对应系统异常,大于等于16的则全是外部中断. 系统异常清单如下所示: ...

  2. [转]Ubuntu默认root用户密码

    Ubuntu默认root用户密码 在试验的过程中,安装完Ubuntu后忽然意识到没有设置root密码,不知道密码自然就无法进入根用户下. 到网上搜了一下,原来是这么回事:Ubuntu的默认root密码 ...

  3. BLE Android开发中的问题

    在此直说两个问题,第一是Android6.0 SDK23版本情况下开发的Android BLE APP,千万要记得在代码中申请到地理位置读取权限,否则你的APP在运行的时候会出现各种问题,另外就是除了 ...

  4. L200

    Last week, I read a story about a 34-year-old British woman who is extremely afraid of metal forks.S ...

  5. 怎样使用visio画数据库模型图

    怎样使用visio画数据库模型图     计算机专业的学生在做程序的需求分析文档或者毕业设计的时候,针对自己开发的系统,肯定少不了要画数据库的模型图.许多同学喜欢用word实现,当然,word可以满足 ...

  6. VMware 虚拟机快照、克隆、磁盘扩容

    1. 快照 快照是虚拟机某个时间点上完整系统的镜像,可以在虚拟机内部通过快照文件恢复系统到之前的节点. 拍摄快照: 恢复快照: 2. 克隆 克隆是原始虚拟机全部状态的一个拷贝,是脱离原始虚拟机独立存在 ...

  7. 解决PHPWind局域网不能访问问题

    解决PHPWind局域网不能访问问题 windows 7环境下搭建PHPWind论坛之后,局域网内不能被访问,访问显示403:而本机访问正常 1. 本版本是windows下一键安装版,首先可以确定的是 ...

  8. LogHelp 日记分天记录，只记30天日记

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  9. Linux环境安装jdk10

    一. 下载jdk 下载方式一:直接在linux上下载 wget --no-check-certificate --no-cookies --header "Cookie: oraclelic ...

  10. 简单实现高并发处理秒杀思路（redis分布式锁）

    利用redis的单线程特性 setnx       (SET if Not eXists) 命令在指定的 key 不存在时,为 key 设置指定的值. getset 自动将key对应到value并且返 ...