Ruby's Louvre

每天学习一点点算法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

我的MVVM框架 v3教程——流程相关

涉及到each, with, if, unless这四种绑定

each绑定在HTML表现为data-each-*-*,其中第一个*为值,第二个*为键名,*只是一个占位符,只要是合法的变量名就OK。第二个*是可选的。在数组中,每一个*你可以称之为元素,第二个为元素的索引值。换言之,each与PHP的foreach那样可以同时处理数组与对象。

with绑定在HTML表现为data-with,允许你将对象的第一层属性拿出来直接调用。

if绑定在HTML表现为data-if,如果它的参数的返回值为false,那么它就不再渲染它的子节点,你在DOM树中看到它们。

unless绑定在HTML表现为data-unless,与if作用相反,为假时显示,真的移除子节点。

<div data-on-mouseover="enableDetails"  >
               Mouse over me
</div>

比如上面这HTML,元素为DIV,绑定器的名字为data-*的属性名的第二个单词on,亦即为事件绑定器,参数为它去掉data-on-剩下的单词,亦即要用到mouseover事件,回调是属性值,enableDetails可能是访问器也可能是命令,这由用户在ViewModel中定义。不过通常情况下它是个普通的函数。我们也可以使用事件代理。

aaaa
 
 
   
 
 
 
   
 
 
这是诸葛亮
 
 
这是周瑜
require("avalon,ready", function($) {
    var $$ = $.MVVM;
    var VM = $$.render({
        user:{
            xxxx: "aaaa",
            yyyy: "bbbb"
        },
        toggle: true,
        list:[{
                title:"aaa"
            },
            {
                title:"bbb"
            },
            {
                title:"ccc"
            },
            {
                title:"ddd"
            }
        ]
    },document.getElementById("mvvm-test"));
 
    setTimeout(function(){
        VM.toggle(false)
    },4500)
 
})
示例
  • aaa
  • bbb
  • ccc
  • ddd
aaaa  xxxx bbbb  yyyy

aaaa  bbbb
这是诸葛亮

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(1661)  评论(0编辑  收藏  举报

编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示