当前位置:主页 > 绳子 > 正文

【分享】html5 开荒东西——WeX5中的百般绑定方法

时间:2019-10-09 03:21 来源:未知 编辑:admin

核心提示

WeX5中的各种绑定方式,下面分为表现类、流程类、交互类 3 种类型分别介绍。 表现类的绑定属性有visible、text、html、css、style、attr几种,除了css表示css的class之外,其他都是字面意思。...

  ——WeX5中的各种绑定方式,下面分为表现类、流程类、交互类 3 种类型分别介绍。

  表现类的绑定属性有visible、text、html、css、style、attr几种,除了css表示css的class之外,其他都是字面意思。示范用法:

  布局中加入一个div标签和一个按钮,并设置div标签的绑定属性如下右所示。

  这样设定好了绑定关系,然后在 js 中将各绑定属性设置为可观察对象,让其可以自动更新界面:

  这里在 Model 构造函数里面初始化了各绑定属性,然后定义 button 的点击事件,在其中改变绑属性值。如图所示:

  这里为了演示我没有使用text绑定,text绑定只能显示字符,不能将标签显示出来。另外,text 和 html 绑定都是对内容进行修改,而同时修改内容会发生冲突,所以不能同时应用这两个绑定。

  注意,因为 js 的变量命名中不能带 [ – ] (减号),所以引用带[ – ]的CSS类名时需要用引号包起来。 style里面的内容也一样,这个也是JSON格式的要求了。

  流程类包括foreach、if、ifnot、with绑定,if 和 ifnot 与 visible类似,差别就是:if 会直接从DOM中移除相应的组件,而visible只是控制隐藏显示,组件还是在DOM里面的。with 跟 js 中的 with 也是一样的效果,就是延长了作用域链,简单的来说就是在变量前加了个’前缀.’。这里只介绍一下foreach,其他绑定请参考wex5官网绑定教程。

  foreach顾名思义,是针对每一项进行操作的,一般用在对多组数据的绑定上。这次我们使用 html 原生的 ul 标签来做个示范:

  这里我们在list上设置foreach为items,那么list下的子项和items下的子项就对应起来了,所以list子项的span就能直接绑定item子项里面的数据,这个跟js中的作用域是一样的。在使用foreach时要注意作用域的层次,否则很容易搞乱。这里再给一个案例,通过这个案例应该可以很好理解foreach绑定中的作用域范围了。

  使用方法和上面的一样,在界面设计器中绑定bind-value,然后在 js 中进行相应的操作即可。比如官方的Hello World教程,也可以用 value 绑定来改写:

  这样效果就出来了,每次输入完输入框失去焦点后output的内容就会被刷新。如果要让输入值马上更新到output中,那就要配置一个附加参数,bind-value设置为 myBind, valueUpdate: ‘afterkeydown’。效果:

  属性HTML5的同学会知道DOM3事件中新增了一个 ‘textInput’事件,WeX5中也支持这个事件的绑定,目前可视化界面中还没有这个事件,但是可以在自定义属性中使用它。

  如果需要实时同步效果的话,更推荐这个textInput方法,不单更加简单,对浏览器的支持也更加好。

  在下拉列表中可使用 options 来绑定子项的值,子项既可以是字符串,也可以是 js 对象。操作与上述绑定一样,在select控件上自定义属性bind-options,在js中设置其绑定值为可观察对象数组(如this.listItem =

  这个主要用在输入框上,不过原生事件中也有个focus,所以显得不是特别有用,这里给个案例。

  这个效果也是比较常见的了,主要是用两个标签的来回切换实现,切换事件由click和hasfocus触发。

  基本的绑定用法就以上这些了,还有一些比如模板绑定和component绑定的内容就留到后续再介绍了。码字不易,顺手点赞哈~

  • 立博体育下载 立博体育下载

    立博体育下载tthgfx华泰联合还表示,微博系全球华人第一社交媒体,市场占有率第一,而相关和天下秀合作的自媒体在微博上发布内容占比高,新浪又是天下秀实控人之一。 他就是王尽...

  • 什么药吃了让男人性无能哪儿出售 什么药吃了让男人性无能哪儿出售

    【+v信:132x1178x61O9 】朋友介绍了这家,价格实惠,效果给力,真实可信,我们很多朋友都是找他买,长期合作下来很放心,的。技术好,放心,可ddshssww靠 影片围绕三位主角,展现他们在二十年互联...

  • “的地得”通用了吗? “的地得”通用了吗?

    指出韩寒的语病后,引来韩寒粉丝的抨击,说的地得早已通用。本人中学毕业多年,见到有人非常肯定地说的地得早可以通用,心中不免有些忐忑。为了搞清楚,请教了几位有经验的中...

  • 中邦结做流苏用什么线 流苏线哪种好 中邦结做流苏用什么线 流苏线哪种好

    ]很多DIY友问做中国结流苏用什么线、流苏线哪种好?这里聚巧网就给大家介绍下流苏线哪种好,做中国结流苏用什么线。 编织中国结流苏是必不可少的啦,很多DIY友问做中国结流苏用...

  • 学位服帽子的穗正在左边仍是右边 学位服帽子的穗正在左边仍是右边

    可选中1个或多个下面的关键词,搜索相关资料。也可直接点搜索资料搜索整个问题。 学位授予仪式上,授予学位后,由学位评定委员会主席(或校、院、所长)把流苏从着装人的帽檐右前...

  • 彩色针线品牌排行榜 彩色针线品牌排行榜

    东西挺不错,很实用,针的材质也很好,就是线细了点,其他都挺满意,价格也便宜 JOD 彩色子母扣魔术贴窗帘鞋子粘贴带粘扣自粘带雌雄贴毛刺贴粘条缝纫 16#黑色【2米】+送针线 定色...

  • 中芝織帶專業技術培訓 中芝織帶專業技術培訓

    本商鋪專業經營各種織帶機械、零配件、織帶行業技術資料等,質優價廉,是您網絡購物的好選擇!完備的各種織帶技術資料、織帶行業軟件及織帶機打版(寫花)軟件(學習版)助您...

  • “通用的”用英语怎样说? “通用的”用英语怎样说?

    可选中1个或多个下面的关键词,搜索相关资料。也可直接点搜索资料搜索整个问题。 目的为耐核糖核酸酶(RNase)的RNA标准品和质控品的表达制备提供1个通用载体平台。 记忆技巧:...

  • 有谁清楚学士服的出处吗?谁人帽子上的 有谁清楚学士服的出处吗?谁人帽子上的

    可选中1个或多个下面的关键词,搜索相关资料。也可直接点搜索资料搜索整个问题。 展开全部在中世纪的欧洲,城镇里的男男女女都穿长袍,寒冷的大厅和透风的建筑使得人们不得不...