MVVM开源框架Knot.js 教程1 - CBS初步

2023-10-11 22:20

本文主要是介绍MVVM开源框架Knot.js 教程1 - CBS初步,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

MVVM开源框架Knot.js 教程1 - CBS初步

Knotjs教程系列 

1.CBS初步(本文)

2.Knot.js Debugger

....持续增加中

 

CBS初步

学习Knot.js,实际上就是学习如何使用CBS。CBS使用和CSS类似的原理,将绑定逻辑从HTML中提取出来,大大地增加了系统的可维护性。

我关于Knot.js介绍的第一篇博文发表之后,有一位朋友敏锐地指出CSS设计的最重要目的之一就是复用,而CBS因为是对逻辑而不是样式的描述,复用性并不像样式那么强,那么CBS存在的意义又在哪里呢?

实际上CBS和CSS虽然原理类似,形式类似,但设计目的却很不一样。 绑定逻辑虽然复用性不如样式,但它会比样式复杂得多。在HTMLtag那么有限的空间里塞入大量的逻辑描述显然对于维护性是极为不利的。CBS就是为了解决这个问题。CBS比CSS在形式上最大的不同在于CBS可以嵌套(对,就像LESS一样),最终形成的CBS会自然和HTML结构保持一致,非常便利。同时独立出来的CBS也能在不影响阅读性的前提下嵌入大量的绑定逻辑,你会发现实用中的CBS中往往包含了大量的javascript嵌入函数,这些逻辑如果硬塞入HTML或者放回Javascript都不会有在CBS中那么自然恰当。

 

安装

到http://knotjs.com/download/latest下载knot.js的最新版本。压缩包里有压缩过的knot.js主文件和debugger,引用knot.min.js,你就能在网页里使用CBS了。

<script src="[PATH_TO_KNOTJS]/knot.min.js"></script>

如果要开启Debugger(开发和学习时推荐开启),再引用下Debugger的js文件knot.debug.js就好。注意启用Debugger对性能会有较大影响,请务必在发布前移除Debugger。

<script src="[PATH_TO_KNOTJS]/debugger/knot.debug.js"></script>

注意你必须从一个web服务器上打开你的网页,否则因为安全原因,Debugger可能无法工作。另外Debugger必须和你的网页在一个域中。

CBS基础

好了,让我们开始看看CBS的基本语法吧:

CBS语法中各个部件解释如下:

  1. Selector(选择器):支持所有的标准CSS selector,同时还支持Object Selector(这个你应该很少用到,详细可以看这里:Selector @GitHub)
  2. Access Point (访问点): 表明这一项绑定将绑定到对象的什么地方。
    1. 左访问点:表明绑定到选择器选中对象的具体属性。如果选择器选中的是HTML对象,则可以是这些HTML对象上的任意一个属性。注意你可以使用数据路径(Path of value),例如使用“style.display” , 你就能直接绑定到HTML元素的style对象的display属性上。除了HTML对象自带的属性外,knot.js还提供了一部分方便使用和跨浏览器的扩展属性(例如后面例子中的“text”);而如果你在使用knot.js的组件,则该组件会有自己特有的访问点,具体请参考该组件的文档。
    2. 右访问点:表明绑定到当前数据上下文对象的具体属性名称。注意这里也能使用数据路径,因此如果你绑定到"user.address.postCode", 也完全没有问题。这里也可以使用绝对路径访问全局变量,例如“/model.user.address.postCode”,也可以使用Target Modifier(绑定目标修改器)绑定到任意HTML元素。关于Target Modifier的问题我们以后再说。

    关于Access Point我们后面会有更多的介绍。如果你现在就想了解更多,请参看这里: Access Point @GitHub

  1. Binding Type(绑定类型):knot.js提供四种绑定类型分布是":"(双向绑定) 、"=>"(右向绑定), "<="(左向绑定)和"="(一次性绑定)。活用这些绑定类型可以使你最大限度地提高系统效率。不过在性能不特别敏感的场合,使用":"(双向绑定) 就已经足够快了,所以如果你不知道该用什么类型的话,请直接使用“:”。关于绑定类型的详细说明,请看这个链接:Binding-types(Wiki@GitHub)
  2. 数据上下文(DataContext):通常情况下,数据上下文就是你想要绑定到HTML元素上的Javascript对象。
    1. 你可以通过“dataContext”访问点来指定一个HTML元素的数据上下文。例如:
      body{ dataContext: /model }

      以上代码将Javascirpt全局对象model设置为"body"元素的数据上下文。

    2. 数据上下文根据DOM结构具有继承性。以1中的例子为例,页面中所有元素的默认数据上下文都会变成model对象,除非该元素自己有一个dataContext的设置。如果某个元素有自己的dataContext设置,则它所有的子元素将全部继承这项设置。
  3. CBS可以嵌套书写。我非常推荐把CBS嵌套书写,这会大幅度提高CBS的可维护性。 嵌套的CBS需要在选择器前加一个"->"。请看例子:
    /* 这是比较“传统”的,css式的做法 */
    .example input{value:name;}
    .example .message{text: name;}/* 改写为CBS的嵌套形式后是这样 */
    .example{-> input{value:name;};-> .message{text: name;};
    }

     

  4. CBS使用type="text/cbs"的script标签来声明。和Javascript一样,你可以直接吧CBS放在这个标签内,也能通过“src”属性引用页面外的独立CBS文件。例如:
     <script type="text/cbs" src="[PATH_TO_CBS]/example.cbs"></script>

     

  5. knot.js也支持直接把绑定配置放在HTML内的做法(虽然不推荐)
    <input type="text" binding="value:name">

     

  6. 比较完整的CBS语法示例请查看这里:CBS Syntax @GitHub,其中涉及的概念和内容我会在以后详细介绍。

示例

下面我们来看一个具体的简单例子。这个例子就是我们在第一篇文章末尾提到的例子,只是做了一点点修改,加入了一个javascript对象。输入姓名,显示一个问候语。你可以点击这个链接: knot.js英文版tutorial 去试用这个例子。

数据流图是这样的:

HTML:

<div class="knot_example"><h3>Greeting from knot.js (V2)</h3><p><label>Input your name here: </label><input type="text"></p><p>Hello <b class="helloString"></b></p>
</div>

Javascript:

//直接使用一个最简单的javascript对象做model
window.greetingModel = {name:"Alex"};

 CBS:

<script type="text/cbs">
.knot_example {/*  设置dataContext为Javascript全局对象 window.greetingModel */dataContext: /greetingModel;/*绑定value到name. 因为当前Data Context是window.greetingMode,所以这个设置也能写为 "value[immediately:1]: /greetingModel.name"      "[immediately:1]" 是一个绑定选项,表示每次击键都更新数据。默认为0,表示焦点移出文本框才更新数据*/-> input{value[immediately:1]: name;};/*绑定 text到 name, 同样的,因为Data Context的存在,最终绑定到window.greetingModel.name*/-> .helloString{text: name;}
}
</script>

 

关于CBS,请注意以下这些点:

  • 如果你想在Knot.js初始化,完成绑定之后再执行某段程序,请使用Knot.ready:
    Knot.ready(function(succeed, err){if(!succ) {global.alert(err.message);return;}// your own code....
    }
  • 和CSS类似,CBS也会被应用于所有被selector选中的HTML元素。例如下面这段CBS将会把页面上所有class含有"title"的元素的text和该元素的DataContext的title属性进行绑定
    .title{ text: title }
  • 并不是所有的访问点都支持双向绑定。例如上面例子中的".helloString"是个span,它的textContent显然是不会自己变化的,所以它就不支持双向绑定。因此,对它的双向绑定实际上会变成单向绑定:
    /* 双向绑定,但因为text不支持,所以最后实际结果就是一个单向绑定 */
    .helloString{text: name;}/* 单向绑定,和上面的完全等价 */
    .helloString{text <= name;}

    支持双向绑定的HTML访问点的列表请看这里:Observable HTML Access Point List @GitHub

如果你对knot.js感兴趣,请关注我以获取后续更新提醒。同时请点击推荐此文,knot.js需要足够的注意力来吸引开发者和建立自己的社区。

knot.js感谢你的支持。

posted on 2015-07-15 19:25 knot.js 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/knotjs/p/Knotjs_Tutorial_1.html

这篇关于MVVM开源框架Knot.js 教程1 - CBS初步的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/191227

相关文章

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas