1 | File `tfw.view.checkbox`:
|
2 | ```xml
|
3 | <View>
|
4 | <View.property name="text" type="string" />
|
5 | <View.property name="value" type="boolean" init="false" />
|
6 | <View.property name="prefixed" type="boolean" init="false" />
|
7 | <div class="tfw-view-checkbox">
|
8 | <div.event name="click" slot="onClick" />
|
9 | <div.class name="prefixed" added="{Link prefixed}" />
|
10 | <div class="text" dom.textContent="{Link text}" />
|
11 | <div class="value">
|
12 | <div.class name="checked" added="{Link value}" />
|
13 | <div/>
|
14 | </div>
|
15 | </div>
|
16 | </View>
|
17 | ```
|
18 |
|
19 | Code behind:
|
20 | ```js
|
21 | function onClick() { this.value = !this.value; }
|
22 | ```
|
23 |
|
24 | Generate code:
|
25 | ```js
|
26 | function onClick() { this.value = !this.value; }
|
27 |
|
28 | var View = require("tfw.view");
|
29 | var Binding = require("tfw.binding");
|
30 | var ConverterString = require("tfw.binding.converters.string");
|
31 | var ConverterBoolean = require("tfw.binding.converters.boolean");
|
32 | module.exports = function() {
|
33 | var that = this;
|
34 | Binding.defProps( that, {
|
35 | text: { cast: ConverterString },
|
36 | value: { cast: ConverterBoolean, init: false },
|
37 | prefixed: { cast: ConverterBoolean, init: false }
|
38 | });
|
39 |
|
40 | var e0 = document.createElement("div");
|
41 | e0.setAttribute( "class", "tfw-view-checkbox" );
|
42 | e0.addEventListener(
|
43 | "click",
|
44 | function( evt ) {
|
45 | onClick.call( that, evt );
|
46 | }, false );
|
47 | View.toggleClass( e0, "prefixed", that, "prefixed" );
|
48 | var e00 = document.createElement("div");
|
49 | e00.setAttribute( "class", "text" );
|
50 | Binding.on( that, 'text', function() {
|
51 | e00.textContent = that.text;
|
52 | });
|
53 | var e01 = document.createElement("div");
|
54 | e01.setAttribute( "class", "value" );
|
55 | View.toggleClass( e01, "checked", that, "value" );
|
56 | var e010 = document.createElement("div");
|
57 | e01.appendChild( e010 );
|
58 | e0.appendChild( e00 );
|
59 | e0.appendChild( e01 );
|
60 |
|
61 | Binding.readonly( this, "$", e0 );
|
62 | }
|
63 | ```
|