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感谢你的支持。

MVVM开源框架Knot.js 教程1 - CBS初步的更多相关文章

  1. MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

    Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...

  2. Farseer.net轻量级ORM开源框架 V1.x 教程目录

    本篇教程将以Ver 1.x版本进行详细使用讲解 大家有任何疑问可以加入我们的官方QQ群进行讨论.QQ群:116228666 (Farseer.net开源框架交流) 请注明:Farseer.Net 整个 ...

  3. Pomelo：网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  4. Android进阶笔记13：RoboBinding（实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架）

    1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...

  5. [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中

    百度网盘下载地址:https://pan.baidu.com/s/1kULNXOF 优酷土豆观看地址:http://v.youku.com/v_show/id_XMzAwNTY2MTE0MA==.ht ...

  6. MVVM模式的几个开源框架

    原文:MVVM模式的几个开源框架 实现MVVM的框架有很多,如: • MVVM Light Toolkit: http://mvvmlight.codeplex.com • Microsoft Pri ...

  7. 【入门篇】前端框架Vue.js知识介绍

    一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...

  8. 各种Android UI开源框架 开源库

    各种Android UI开源框架 开源库 转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...

  9. iOS常用第三方开源框架和优秀开发者博客等

    博客收藏iOS开发过程好的开源框架.开源项目.Xcode工具插件.Mac软件.文章等,会不断更新维护,希望对你们有帮助.如果有推荐或者建议,请到此处提交推荐或者联系我. 该文档已提交GitHub,点击 ...

随机推荐

  1. 使用新浪云 Java 环境搭建一个简单的微信处理后台

    前一段时间,写了一篇在新浪云上搭建自己的网站的教程,通过简单构建了一个 maven 的项目,展示部署的整个流程,具体的操作可以参看这里. 新浪云服务器除了可以搭建自己的网站以外,也非常的适合作为微信公 ...

  2. MYSQL双主故障解决实例。

    根据报错得知,获取到的主库文件格式错误. 一.锁住主从正常的库 Mysql> flush tables with read lock; 锁表 unlock tables; 解锁 SHOW MAS ...

  3. lsm-tree

    https://www.quora.com/How-does-the-Log-Structured-Merge-Tree-work http://blog.cloudera.com/blog/2012 ...

  4. Java设计模式06：常用设计模式之适配器模式（结构型模式）

    1. Java之适配器模式(Adapter Pattern) (1)概述:    将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类,可以在一起 ...

  5. Quartz 之 windowService

    (一)创建服务 QuarzService using System.ServiceProcess;using System.Text; using Quartz;using Quartz.Impl; ...

  6. 关于matlab中textread

    本文主要内容引自http://linux.chinaitlab.com/administer/872894.html 笔者在此基础上进行运行,修改得到以下内容,希望大家给与补充: textread 基 ...

  7. b端商家赋值权限

  8. jQuery Ajax封装（附带加载提示和请求结果提示模版）

    1.创建HTML文件(demo) <!doctype html> <html lang="en"> <head> <meta charse ...

  9. height属性

    高度属性: height:长度值|百分比|auto 最大高度:max-height 最小高度:min-height 说明:设置块级元素和替换元素的内容高度.

  10. 数组的高级API-sort

    按升降序排列数组项.本身存在的问题:只能通过第一位排列.解决方法:通过回调函数进行规制设置. a - b 升序. b - a 降续. 其内部运用了冒泡排序 <!DOCTYPE html> ...