`
Josh_Persistence
  • 浏览: 1658493 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

JQuery模板 :(九) JsRender之JsViews中的JsObserverable

阅读更多

一、什么是JsObserverable:

JsObservable library 是JsViews的一部分,用于在JsViews中提供数据绑定的功能。同样允许JsViews的应用触发数据的变化,使用程序的方式(JsObserverable API)来“观察”数据的变化以实现数据绑定功能,数据是observerable(可视的)意思是该数据(可视数据)的变化会引起与之绑定的template中的数据及时的发生变化。

 

二、实例代码:

 

<!DOCTYPE html>


<html>
<head>
    <link href="../css/samples.css" rel="stylesheet"/>
    <script src="../jquery/jquery-2.0.3.js"></script>
    <script src="../jsviews/jsviews.js"></script>
</head>
<body>

<table><tbody id="result"></tbody></table>

<script id="theTmpl" type="text/x-jsrender">
  <tr><td>
    <button id="addBtn">Add</button>
  </td></tr>
  {^{for people}}
    <tr><td>
      <button class="change">Change</button>
      <button class="remove">X</button>
      {^{:name}} 
    </td></tr>
  {{/for}}
</script>

<script>
var template = $.templates("#theTmpl");

var people = [
    {
      name: "JoshWang"
    },
    {
      name: "WangSheng"
    }
  ];

var counter = 1;

template.link("#result", {people: people});

$("#addBtn").on("click", function(){
  $.observable(people).insert(people.length, {name: "name" + counter++});
})

$("#result")
  .on("click", ".change", function(){
    var dataItem = $.view(this).data;
    $.observable(dataItem).setProperty("name", dataItem.name + "*");
  })
  .on("click", ".remove", function(){
    var index = $.view(this).index;
    $.observable(people).remove(index);
  });
</script>

</body>
</html>

 

 

代码解读:

1) JsObservable API:$.observable(object).setProperty(...);
$.observable(dataItem) 使得dataItem是可视的,通过setProperty()方法,相关的变化将会被template中声明的动态绑定观察的,即相关的变化,会引起与之绑定的动态数据的变化。
2)JsObservable API: $.observable(array).insert(...);
$.observable(people)使得people这个数组是可视的,通过提供方法insert()和remove(),表示数组的变化也是可视的,即template中与之绑定的元素和标签,例如{^{for people}} 签也会随之变化。
3)JsObservable API: .view(elem) 
.view(elem) 用于将任何的DOM元素变成当前可视的Object.
 

 

 

0
0
分享到:
评论

相关推荐

    【光子晶体】基于matlab FDTD模拟一维光子晶体中光波传输【含Matlab源码 11059期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【海洋】基于matlab海洋卫星测高数据仿真DEM信息【含Matlab源码 10984期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【光学】基于matlab蒙特卡洛方法求解辐射传输方程【含Matlab源码 10968期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    log凑字数 12345678910

    log凑字数 12345678910

    【毕业设计】java+springboot+vue电影评论网站系统设计与实现(完整前后端+mysql+说明文档+LunW).zip

    【毕业设计】java+springboot+vue电影评论网站系统设计与实现(完整前后端+mysql+说明文档+LunW).zip

    【图像分割】基于matlab方差标准四叉树分解图像分割【含Matlab源码 9827期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    双向全桥LLC谐振变换器与非对称拓扑的双向模型仿真研究:正向LLC与反向LC的变频控制闭环模型在Matlab Simulink及PLECS环境下的应用,双向全桥LLC谐振变换器:非对称拓扑与双向模型的

    双向全桥LLC谐振变换器与非对称拓扑的双向模型仿真研究:正向LLC与反向LC的变频控制闭环模型在Matlab Simulink及PLECS环境下的应用,双向全桥LLC谐振变换器:非对称拓扑与双向模型的Matlab Simulink及PLECS仿真研究,双向全桥LLC谐振变器仿真,非对称拓扑,双向模型 正向LLC,反向LC 采用变频控制的闭环模型 运行环境包括matlab simulink,plecs等 ~ ,双向全桥LLC谐振变换器仿真; 非对称拓扑; 双向模型; 变频控制; Matlab Simulink; PLECS。,双向全桥LLC谐振变换器仿真研究:非对称拓扑与变频控制模型

    Jordan标准型行列互逆方法-程序求解

    Jordan标准型行列互逆方法-程序求解

    DIN-SQL:分解式上下文学习的文本到SQL转换及自校正

    目前,在复杂任务(如Spider数据集上的文本到SQL转换)中,使用大型语言模型(LLMs)的微调模型和提示方法之间存在显著差距。为了提高LLMs在推理过程中的性能,我们研究了将任务分解为较小子任务的有效性。特别是,我们展示了将生成问题分解为子问题,并将这些子问题的解决方案输入给LLMs,可以显著提高其性能。我们的实验表明,这种方法使三个LLMs的简单少样本性能提高了大约10%,使其准确性接近或超过最先进水平(SOTA)。在Spider数据集的保留测试集中,以执行准确率为衡量标准,最先进水平是79.9,而使用我们方法的新最先进水平为85.3。我们的方法在上下文中学习,比许多经过深度微调的模型高出至少5%。此外,在BIRD基准测试中,我们的方法实现了55.9%的执行准确率,创下了该基准测试保留测试集的新最先进水平

    MATLAB-GUI-平台的手势识别.zip

    程序可以参考,非常好的思路建设,完美!

    【语音编码】基于matlab语音信号PCM编解码(含前后波形对比 SNR)【含Matlab源码 11159期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    (源码)基于FreeRTOS的ARM926EJS实验系统_2.zip

    # 基于FreeRTOS的ARM926EJS实验系统 ## 项目简介 本项目将FreeRTOS移植到基于ARM926EJ S CPU的ARM Versatile Platform Baseboard上,当前版本基于FreeRTOS 10.4.0,后续会随FreeRTOS新版本发布而更新。项目处于早期开发阶段,包含基础的演示任务,可用于学习和研究实时操作系统的基本功能与应用。 ## 项目的主要特性和功能 1. FreeRTOS内核移植实现FreeRTOS内核在ARM926EJ S架构上的移植,支持任务管理、信号量、队列、事件标志、互斥量等功能。 2. 中断处理具备中断服务例行程序,能处理中断事件并切换任务。 3. 任务切换有任务切换机制,支持手动切换和定时器中断切换。 4. 定时器管理可进行定时器的创建、启动、停止、查询等操作。 5. 内存管理实现动态内存分配与释放,支持运行时动态操作。

    【图像加密解密】基于matlab混沌系统和DNA编码图像分块加密解密(含直方图 密钥 相关性)【含Matlab源码 9695期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【车间调度】基于matlab多元宇宙算法MVO求解分布式置换流水车间调度DPFSP【含Matlab源码 6138期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    基于MATLAB Simulink R2015b的三电平中性点钳位(NPC)逆变器高级仿真模型,基于MATLAB Simulink R2015b的三电平中性点钳位(NPC)逆变器高级仿真模型,Thre

    基于MATLAB Simulink R2015b的三电平中性点钳位(NPC)逆变器高级仿真模型,基于MATLAB Simulink R2015b的三电平中性点钳位(NPC)逆变器高级仿真模型,Three_Level_NPC_Inverter:基于MATLAB Simulink的三电平中性点钳位(NPC)逆变器仿真模型。 仿真条件:MATLAB Simulink R2015b,拿后前如需转成低版本格式请提前告知,谢谢。 ,核心关键词:Three_Level_NPC_Inverter; MATLAB Simulink; 仿真模型; R2015b版本。,基于MATLAB Simulink的三电平NPC逆变器仿真模型(R2015b版)

    【形状检测】形状特征圆和矩形检测(含尺寸)【含Matlab源码 4625期】.md

    CSDN Matlab武动乾坤上传的资料均是完整代码运行出的仿真结果图,可见完整代码亲测可用,适合小白; 1、完整的代码内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【地震】基于matlab两自由度体系非线性的地震响应【含Matlab源码 11062期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    graph-searcher 机器人路径搜索

    graph_searcher 机器人路径搜索

    【大气波导】基于matlab蒸发波导高度随气海温差变化【含Matlab源码 7575期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

Global site tag (gtag.js) - Google Analytics