CKEditor5 模板绑定

CK5还可以将模板的属性绑定到可观测对象属性,如下代码所示:

import {View} from 'ckeditor5/src/ui';
export default class Button extends View {
    constructor(){
        super();
        this.type = 'button';

        const bind = this.bindTemplate;

        // this.label is observable but undefined.
        this.set( 'label' );

        // this.isOn is observable and false.
        this.set( 'isOn', false );

        // this.isEnabled is observable and true.
        this.set( 'isEnabled', true );

        this.setTemplate( {
            tag: 'button',
            attributes: {
                class: [
                // The 'ck-on' and 'ck-off' classes toggle according to the #isOn property.
                    bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),

                // The 'ck-enabled' class appears when the #isEnabled property is false.
                    bind.if( 'isEnabled', 'ck-disabled', value => !value )
                ],
                type: this.type
            },
            children: [
                {
                    // The text of the button is bound to the #label property.
                    text: bind.to( 'label' )
                }
            ]
        } );
    }
}

这里的button对象有三个可观测属性,使用bind方法将isOn和isEnabled绑定到class属性;同时将label绑定到text属性。

接下来是使用button的代码

const button = new Button();
// Render the button to create its #element.
button.render();
button.label = 'Bold';     // <button class="ck-off" type="button">Bold</button>
button.isOn = true;        // <button class="ck-on" type="button">Bold</button>
button.label = 'B';        // <button class="ck-on" type="button">B</button>
button.isOff = false;      // <button class="ck-off" type="button">B</button>
button.isEnabled = false;  // <button class="ck-off ck-disabled" type="button">B</button>
document.body.appendChild( button.element );

下面我们看看全部执行会产生一个什么样的button:

从以上生成的按钮和代码可以看出当改变button的属性时,对应的class属性值和text的值也发生了变化。

 

下一节我们学习怎么对绑定的属性进行传播和共享。

版权声明:著作权归作者所有。

相关推荐

CKEditor5正确添加插件的方法

CKEditor5添加插件错误ckeditor-duplicated-modules本来想在CKEditor 5的ckeditor5-build-classic添加一个Code Block插件,按官方文档,先安装@ckeditor/ckeditor5-code-blocknpm install --save @ckeditor/ckeditor5-code-block然后再代码中引入使用:impo

Spring Cloud集成ZooKeeper注册中心绑定指定ip,解决UnknownHostException

Spring Cloud集成Zookeeper作为注册中心,从网关Spring Cloud GateWay转发给微服务里,在微服务里看到发送请求过来是以主机别名为url,如主机别名是server1.cluster,那么访问的地址是http://server.cluster/xxx。在GateWay有时会导致找不到服务。报类似如下的错误:500 Server Error for HTTP GET "

ES6字符串模板的使用

字符串模板let name = ‘leying’let age =18let str=’这个人叫’+name+’,年龄是 ‘+age+ ‘岁’’;console.log(str) //这个人叫leying年龄是18岁es6:let name = ‘leying’let age =18let str= `这个人叫${name},年龄是${age}s岁 `console.log(str) //这个人

Vue.js 2属性值绑定v-bind

语法:v-bind指令用于动态绑定值给属性,它的值可以是数组,对象以及表达式基本使用<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fil

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil

JavaScript:给动态元素绑定事件

JavaScript给动态添加的元素绑定事件有几种方式:方法一:jQuery使用jQuery.fn.on可以很简单为动态元素绑定事件:$(staticAncestors).on(eventName, dynamicChild, function() {}); staticAncestors:静态的祖先元素选择器eventName:事件名,如click等dynamicC