UNPKG

1.89 kBMarkdownView Raw
1File `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
19Code behind:
20```js
21function onClick() { this.value = !this.value; }
22```
23
24Generate code:
25```js
26function onClick() { this.value = !this.value; }
27
28var View = require("tfw.view");
29var Binding = require("tfw.binding");
30var ConverterString = require("tfw.binding.converters.string");
31var ConverterBoolean = require("tfw.binding.converters.boolean");
32module.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```