Skip to content

Commit 0ef5f0f

Browse files
tenbitstenbits
committed
add (deco) slot/attr
1 parent 1b53fa7 commit 0ef5f0f

32 files changed

+867
-826
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"typescript.tsdk": "node_modules\\typescript\\lib"
3+
}

‎package-lock.json

+185-322
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
"@types/jquery": "^3.3.22",
2929
"@types/sinon": "^7.0.5",
3030
"app-bundler": "0.0.68",
31-
"atma": "^0.12.9",
31+
"atma": "^0.12.12",
3232
"atma-io-middleware-condcomments": "^1.2.8",
3333
"atma-io-middleware-importer": "^1.1.37",
3434
"atma-io-middleware-uglify": "^1.1.21",
35-
"atma-loader-ts": "^1.1.11",
35+
"atma-loader-ts": "^1.1.12",
3636
"dts-bundle": "^0.7.3",
3737
"jsdoc-to-markdown": "git+https://github.com/tenbits/jsdoc-to-markdown"
3838
},

‎projects/mask-binding/test/bind.spec.ts

+162-162
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,166 @@
1-
import { Mask as mask } from '../../../src/mask'
1+
import { Mask as mask } from '@core/mask'
22
const Compo = mask.Compo;
33

44
UTest({
5-
'binded each' () {
6-
7-
var model = {
8-
users: ['A', 'B', 'C']
9-
},
10-
dom = mask.render('div > +each (users) > span > "~[.]"', model);
11-
12-
eq_(dom.textContent, 'ABC', 'Render Failed');
13-
14-
model.users.push('E');
15-
eq_(dom.textContent, 'ABCE', 'Push Failed');
16-
17-
model.users.unshift('0');
18-
eq_(dom.textContent, '0ABCE', 'Unshift Failed');
19-
20-
model.users.splice(1, 0, '1', '2');
21-
eq_(dom.textContent, '012ABCE', 'Splice Failed');
22-
23-
model.users.reverse();
24-
eq_(dom.textContent, 'ECBA210', 'Reverse Failed');
25-
26-
model.users.sort();
27-
eq_(dom.textContent, '012ABCE', 'Sort Failed');
28-
29-
model.users.sort(function(a, b) {
30-
return isNaN(+a) ? -1 : 1;
31-
});
32-
eq_(dom.textContent, model.users.join(''), 'FN Sort Failed');
33-
34-
model.users.splice(0);
35-
eq_(dom.textContent, '', 'Empty Failed');
36-
37-
model.users.unshift('F');
38-
eq_(dom.textContent, 'F', 'Unshift Failed');
39-
40-
model.users.push('1');
41-
model.users.push('2');
42-
model.users.push('3');
43-
model.users.push('4');
44-
model.users.splice(1, 4, '5', '6', '7');
45-
model.users.splice(0, 1, 'A');
46-
eq_(dom.textContent, 'A567', 'Complex splice Failed');
47-
48-
49-
model.users = ['X', 'Z'];
50-
eq_(dom.textContent, 'XZ', 'Model redefine failed');
51-
52-
53-
model.users.unshift('Y');
54-
eq_(dom.textContent, 'YXZ', 'Unshift failed after redefine');
55-
56-
},
57-
'bind util': function(){
58-
var model = {
59-
name: 'A',
60-
age: 1,
61-
height: 10
62-
},
63-
div = mask.render('div data-age="~[bind:name]" style="color:red; height:~[bind:height]px"> "~[bind:age]"', model);
64-
65-
eq_(div.getAttribute('data-age'), 'A');
66-
eq_(div.textContent, '1');
67-
eq_(div.getAttribute('style'), 'color:red; height:10px');
68-
eq_(div.style.height, '10px');
69-
70-
model.name = 'B';
71-
model.age = 2;
72-
model.height = 2;
73-
74-
eq_(div.getAttribute('data-age'), 'B');
75-
eq_(div.textContent, '2');
76-
eq_(div.getAttribute('style'), 'color:red; height:2px');
77-
eq_(div.style.height, '2px');
78-
},
79-
'bind handler': function(){
80-
var model = {
81-
user: {
82-
name: 'A'
83-
}
84-
};
85-
86-
var dom = mask.render('input type="text" > :bind expression="user.name + 12";', model);
87-
88-
eq_(dom.value, 'A12');
89-
90-
model.user.name = 'C';
91-
eq_(dom.value, 'C12');
92-
93-
},
94-
95-
'bind via accessor': function(){
96-
97-
var model = {
98-
name: 'A'
99-
},
100-
ctr = {
101-
someFn: function(){
102-
return this.x;
103-
},
104-
x: {
105-
age: 10
106-
}
107-
},
108-
dom;
109-
110-
dom = mask.render('div > "~[bind: name + $.someFn().age]"', model, null, null, ctr);
111-
eq_(dom.textContent, 'A10');
112-
113-
model.name = 'B'
114-
eq_(dom.textContent, 'B10');
115-
116-
ctr.x.age = 5;
117-
eq_(dom.textContent, 'B5');
118-
119-
dom = mask.render('div > "~[bind: $.someFn().age]"', model, null, null, ctr);
120-
ctr.x.age = 7;
121-
eq_(dom.textContent, '7');
122-
},
123-
124-
'controller binder': function(){
125-
var Ctor = mask.Compo({
126-
template: 'div > "~[bind: $.age]"',
127-
age: 10,
128-
})
129-
var app = Compo.initialize(Ctor);
130-
eq_(app.age, 10);
131-
132-
app.$.eq_('text', '10')
133-
134-
eq_(app.__observers.age.length, 1);
135-
136-
app.age = 5;
137-
app.$.eq_('text', '5');
138-
139-
app.remove();
140-
eq_(app.__observers.age.length, 0);
141-
eq_(app.$, null);
142-
},
143-
'controller scope binder': function(){
144-
var Ctor = mask.Compo({
145-
template: 'div > "~[bind: foo.bar]"',
146-
scope: {
147-
foo: {
148-
bar: 10
149-
}
150-
}
151-
});
152-
var app = Compo.initialize(Ctor);
153-
eq_(app.scope.foo.bar, 10);
154-
155-
app.$.eq_('text', '10')
156-
157-
eq_(app.scope.__observers['foo.bar'].length, 1);
158-
159-
app.scope.foo.bar = 5;
160-
app.$.eq_('text', '5');
161-
162-
app.remove();
163-
eq_(app.scope.__observers['foo.bar'].length, 0);
164-
eq_(app.$, null);
165-
}
5+
'binded each'() {
6+
7+
let model = {
8+
users: ['A', 'B', 'C']
9+
},
10+
dom = mask.render('div > +each (users) > span > "~[.]"', model);
11+
12+
eq_(dom.textContent, 'ABC', 'Render Failed');
13+
14+
model.users.push('E');
15+
eq_(dom.textContent, 'ABCE', 'Push Failed');
16+
17+
model.users.unshift('0');
18+
eq_(dom.textContent, '0ABCE', 'Unshift Failed');
19+
20+
model.users.splice(1, 0, '1', '2');
21+
eq_(dom.textContent, '012ABCE', 'Splice Failed');
22+
23+
model.users.reverse();
24+
eq_(dom.textContent, 'ECBA210', 'Reverse Failed');
25+
26+
model.users.sort();
27+
eq_(dom.textContent, '012ABCE', 'Sort Failed');
28+
29+
model.users.sort(function (a, b) {
30+
return isNaN(+a) ? -1 : 1;
31+
});
32+
eq_(dom.textContent, model.users.join(''), 'FN Sort Failed');
33+
34+
model.users.splice(0);
35+
eq_(dom.textContent, '', 'Empty Failed');
36+
37+
model.users.unshift('F');
38+
eq_(dom.textContent, 'F', 'Unshift Failed');
39+
40+
model.users.push('1');
41+
model.users.push('2');
42+
model.users.push('3');
43+
model.users.push('4');
44+
model.users.splice(1, 4, '5', '6', '7');
45+
model.users.splice(0, 1, 'A');
46+
eq_(dom.textContent, 'A567', 'Complex splice Failed');
47+
48+
49+
model.users = ['X', 'Z'];
50+
eq_(dom.textContent, 'XZ', 'Model redefine failed');
51+
52+
53+
model.users.unshift('Y');
54+
eq_(dom.textContent, 'YXZ', 'Unshift failed after redefine');
55+
56+
},
57+
'bind util' () {
58+
let model = {
59+
name: 'A',
60+
age: 1,
61+
height: 10
62+
},
63+
div = mask.render('div data-age="~[bind:name]" style="color:red; height:~[bind:height]px"> "~[bind:age]"', model);
64+
65+
eq_(div.getAttribute('data-age'), 'A');
66+
eq_(div.textContent, '1');
67+
eq_(div.getAttribute('style'), 'color:red; height:10px');
68+
eq_(div.style.height, '10px');
69+
70+
model.name = 'B';
71+
model.age = 2;
72+
model.height = 2;
73+
74+
eq_(div.getAttribute('data-age'), 'B');
75+
eq_(div.textContent, '2');
76+
eq_(div.getAttribute('style'), 'color:red; height:2px');
77+
eq_(div.style.height, '2px');
78+
},
79+
'bind handler' () {
80+
let model = {
81+
user: {
82+
name: 'A'
83+
}
84+
};
85+
86+
let dom = mask.render<HTMLInputElement>('input type="text" > :bind expression="user.name + 12";', model);
87+
88+
eq_(dom.value, 'A12');
89+
90+
model.user.name = 'C';
91+
eq_(dom.value, 'C12');
92+
93+
},
94+
95+
'bind via accessor' () {
96+
97+
let model = {
98+
name: 'A'
99+
},
100+
ctr = {
101+
someFn () {
102+
return this.x;
103+
},
104+
x: {
105+
age: 10
106+
}
107+
},
108+
dom;
109+
110+
dom = mask.render('div > "~[bind: name + $.someFn().age]"', model, null, null, ctr);
111+
eq_(dom.textContent, 'A10');
112+
113+
model.name = 'B'
114+
eq_(dom.textContent, 'B10');
115+
116+
ctr.x.age = 5;
117+
eq_(dom.textContent, 'B5');
118+
119+
dom = mask.render('div > "~[bind: $.someFn().age]"', model, null, null, ctr);
120+
ctr.x.age = 7;
121+
eq_(dom.textContent, '7');
122+
},
123+
124+
'controller binder' () {
125+
let Ctor = mask.Compo({
126+
template: 'div > "~[bind: $.age]"',
127+
age: 10,
128+
})
129+
let app = Compo.initialize(Ctor);
130+
eq_(app.age, 10);
131+
132+
app.$.eq_('text', '10')
133+
134+
eq_(app.__observers.age.length, 1);
135+
136+
app.age = 5;
137+
app.$.eq_('text', '5');
138+
139+
app.remove();
140+
eq_(app.__observers.age.length, 0);
141+
eq_(app.$, null);
142+
},
143+
'controller scope binder' () {
144+
let Ctor = mask.Compo({
145+
template: 'div > "~[bind: foo.bar]"',
146+
scope: {
147+
foo: {
148+
bar: 10
149+
}
150+
}
151+
});
152+
let app = Compo.initialize(Ctor);
153+
eq_(app.scope.foo.bar, 10);
154+
155+
app.$.eq_('text', '10')
156+
157+
eq_(app.scope.__observers['foo.bar'].length, 1);
158+
159+
app.scope.foo.bar = 5;
160+
app.$.eq_('text', '5');
161+
162+
app.remove();
163+
eq_(app.scope.__observers['foo.bar'].length, 0);
164+
eq_(app.$, null);
165+
}
166166
});

0 commit comments

Comments
 (0)