-
Notifications
You must be signed in to change notification settings - Fork 130
/
Copy pathjquery.views.js
3143 lines (2880 loc) · 115 KB
/
jquery.views.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/*! jquery.views.js v0.9.81 (Beta): http://jsviews.com/ */
/*
* Interactive data-driven views using JsRender templates.
* Subcomponent of JsViews
* Requires jQuery and jsrender.js (Best-of-breed templating in browser or on Node.js)
* See JsRender at http://jsviews.com/#download and http://github.com/BorisMoore/jsrender
* Also requires jquery.observable.js
* See JsObservable at http://jsviews.com/#download and http://github.com/BorisMoore/jsviews
*
* Copyright 2016, Boris Moore
* Released under the MIT License.
*/
//jshint -W018, -W041
(function(factory, global) {
// global var is the this object, which is window when running in the usual browser environment
var $ = global.jQuery;
if (typeof exports === "object") { // CommonJS e.g. Browserify
module.exports = $
? factory(global, $)
: function($) { // If no global jQuery, take jQuery passed as parameter (with JsRender and JsObservable): require("jquery.views")(jQuery)
return factory(global, $);
};
} else if (typeof define === "function" && define.amd) { // AMD script loader, e.g. RequireJS
define(["jquery", "./jsrender", "./jquery.observable"], function($, jsr, jso) {
return factory(global, $, jsr, jso);
}); // Require jQuery, JsRender, JsObservable
} else { // Browser using plain <script> tag
factory(global, false);
}
} (
// factory (for jquery.views.js)
function(global, $, jsr, jso) {
"use strict";
//========================== Top-level vars ==========================
// global var is the this object, which is window when running in the usual browser environment
var setGlobals = $ === false; // Only set globals if script block in browser (not AMD and not CommonJS)
jsr = jsr || setGlobals && global.jsrender;
$ = $ || global.jQuery;
var versionNumber = "v0.9.81",
requiresStr = "JsViews requires ";
if (!$ || !$.fn) {
// jQuery is not loaded.
throw requiresStr + "jQuery"; // We require jQuery
}
if (jsr && !jsr.fn) {
jsr.views.sub._jq($); // map over from jsrender namespace to jQuery namespace
}
var $observe, $observable,
$isArray = $.isArray,
$views = $.views;
if (!$views || !$views.map) {
// JsRender is not loaded.
throw requiresStr + "JsRender"; // jsrender.js must be loaded before JsViews and after jQuery
}
var document = global.document,
$viewsSettings = $views.settings,
$sub = $views.sub,
$subSettings = $sub.settings,
$extend = $sub.extend,
$isFunction = $.isFunction,
$expando = $.expando,
$converters = $views.converters,
$tags = $views.tags,
$subSettingsAdvanced = $subSettings.advanced,
// These two settings can be overridden on settings after loading jsRender, and prior to loading jquery.observable.js and/or JsViews
propertyChangeStr = $sub.propChng = $sub.propChng || "propertyChange",
arrayChangeStr = $sub.arrChng = $sub.arrChng || "arrayChange",
HTML = "html",
syntaxError = $sub.syntaxErr,
rFirstElem = /<(?!script)(\w+)[>\s]/,
error = $sub._er,
onRenderError = $sub._err,
delimOpenChar0, delimOpenChar1, delimCloseChar0, delimCloseChar1, linkChar, topView,
rEscapeQuotes = /['"\\]/g; // Escape quotes and \ character
if ($.link) { return $; } // JsViews is already loaded
$subSettings.trigger = true;
var activeBody, rTagDatalink, $view, $viewsLinkAttr, linkViewsSel, wrapMap, viewStore, oldAdvSet,
jsvAttrStr = "data-jsv",
elementChangeStr = "change.jsv",
onBeforeChangeStr = "onBeforeChange",
onAfterChangeStr = "onAfterChange",
onAfterCreateStr = "onAfterCreate",
CHECKED = "checked",
CHECKBOX = "checkbox",
RADIO = "radio",
RADIOINPUT = "input[type=radio]",
NONE = "none",
SCRIPT = "SCRIPT",
TRUE = "true",
closeScript = '"></script>',
openScript = '<script type="jsv',
deferAttr = jsvAttrStr + "-df",
bindElsSel = "script,[" + jsvAttrStr + "]",
fnSetters = {
value: "val",
input: "val",
html: HTML,
text: "text"
},
valueBinding = {from: "value", to: "value"},
isCleanCall = 0,
oldCleanData = $.cleanData,
oldJsvDelimiters = $viewsSettings.delimiters,
safeFragment = document.createDocumentFragment(),
qsa = document.querySelector,
// elContent maps tagNames which have only element content, so may not support script nodes.
elContent = {ol: 1, ul: 1, table: 1, tbody: 1, thead: 1, tfoot: 1, tr: 1, colgroup: 1, dl: 1, select: 1, optgroup: 1, svg: 1, svg_ns: 1},
badParent = {tr: "table"},
voidElems = {br: 1, img: 1, input: 1, hr: 1, area: 1, base: 1, col: 1, link: 1, meta: 1,
command: 1, embed: 1, keygen: 1, param: 1, source: 1, track: 1, wbr: 1},
displayStyles = {},
bindingStore = {},
bindingKey = 1,
rViewPath = /^#(view\.?)?/,
rConvertMarkers = /((\/>)|<\/(\w+)>|)(\s*)([#\/]\d+(?:_|(\^)))`(\s*)(<\w+(?=[\s\/>]))?|\s*(?:(<\w+(?=[\s\/>]))|<\/(\w+)>(\s*)|(\/>)\s*|(>)|$)/g,
rOpenViewMarkers = /(#)()(\d+)(_)/g,
rOpenMarkers = /(#)()(\d+)([_^])/g,
rViewMarkers = /(?:(#)|(\/))(\d+)(_)/g,
rOpenTagMarkers = /(#)()(\d+)(\^)/g,
rMarkerTokens = /(?:(#)|(\/))(\d+)([_^])([-+@\d]+)?/g,
rSplitBindings = /&(\d+)\+?/g,
getComputedStyle = global.getComputedStyle;
$observable = $.observable;
if (!$observable) {
// JsObservable is not loaded.
throw requiresStr + "JsObservable"; // jquery.observable.js must be loaded before JsViews
}
$observe = $observable.observe;
//========================== Top-level functions ==========================
//===============
// Event handlers
//===============
function elemChangeHandler(ev, params, sourceValue) {
var setter, cancel, fromAttr, linkCtx, cvtBack, cnvtName, target, $source, view, binding, oldLinkCtx, onBeforeChange, onAfterChange, tag, to, eventArgs, exprOb,
source = ev.target,
bindings = source._jsvBnd;
// _jsvBnd is a string with the syntax: "&bindingId1&bindingId2"
if (bindings) {
while (binding = rSplitBindings.exec(bindings)) {
if (binding = bindingStore[binding[1]]) {
if (to = binding.to) {
// The binding has a 'to' field, which is of the form [[targetObject, toPath], cvtBack]
linkCtx = binding.linkCtx;
view = linkCtx.view;
tag = linkCtx.tag || view.tag;
$source = $(source);
onBeforeChange = view.hlp(onBeforeChangeStr); // TODO Can we optimize this and other instances of same?
onAfterChange = view.hlp(onAfterChangeStr); // TODO Can we optimize this and other instances of same
fromAttr = defaultAttr(source);
setter = fnSetters[fromAttr];
if (sourceValue === undefined) {
sourceValue = $isFunction(fromAttr)
? fromAttr(source)
: setter
? $source[setter]()
: $source.attr(fromAttr);
}
cnvtName = to[1];
to = to[0]; // [object, path]
to = to + "" === to ? [linkCtx.data, to] : to;
if (cnvtName) {
if ($isFunction(cnvtName)) {
cvtBack = cnvtName;
} else {
cvtBack = view.getRsc("converters", cnvtName);
}
}
if (linkCtx.elem.nodeName === "SELECT") {
linkCtx.elem._jsvSel = sourceValue = sourceValue || (linkCtx.elem.multiple ? [] : sourceValue);
// data-link <select> to string or (multiselect) array of strings
}
if (cvtBack) {
sourceValue = cvtBack.call(tag, sourceValue);
}
// Set linkCtx on view, dynamically, just during this handler call
oldLinkCtx = view.linkCtx;
view.linkCtx = linkCtx;
eventArgs = {
change: "change",
oldValue: linkCtx._val,
value: sourceValue
};
if ((!onBeforeChange || !(cancel = onBeforeChange.call(linkCtx, ev, eventArgs) === false)) &&
(!tag || !tag.onBeforeChange || !(cancel = tag.onBeforeChange(ev, eventArgs) === false)) &&
sourceValue !== undefined) {
target = to[0]; // [object, path]
if (sourceValue !== undefined && target) {
if (target._jsv) {
exprOb = target;
target = linkCtx.data;
while (exprOb && exprOb.sb) {
target = linkCtx._ctxCb(exprOb, target);
exprOb = exprOb.sb;
}
}
if (tag) {
tag._.chging = true; // marker to prevent tag change event triggering its own refresh
}
$observable(target).setProperty(to[1], sourceValue); // 2way binding change event - observably updating bound object
if (onAfterChange) {
onAfterChange.call(linkCtx, ev, eventArgs);
}
if (tag) {
if (tag.onAfterChange) {
tag.onAfterChange(ev, eventArgs);
}
tag._.chging = undefined; // clear the marker
}
linkCtx._val = sourceValue;
}
}
view.linkCtx = oldLinkCtx;
}
}
}
}
}
function propertyChangeHandler(ev, eventArgs, linkFn) {
var attr, sourceValue, noUpdate, forceUpdate, hasError, onError,
linkCtx = this,
tag = linkCtx.tag,
source = linkCtx.data,
target = linkCtx.elem,
cvt = linkCtx.convert,
parentElem = target.parentNode,
view = linkCtx.view,
oldLinkCtx = view.linkCtx,
onEvent = view.hlp(onBeforeChangeStr);
// Set linkCtx on view, dynamically, just during this handler call
view.linkCtx = linkCtx;
if (parentElem && (!onEvent || !(eventArgs && onEvent.call(linkCtx, ev, eventArgs) === false))
// If data changed, the ev.data is set to be the path. Use that to filter the handler action...
&& !(eventArgs && ev.data.prop !== "*" && ev.data.prop !== eventArgs.path)) {
if (eventArgs) {
linkCtx.eventArgs = eventArgs;
}
if (eventArgs || linkCtx._toLk) {
// If eventArgs are defined, this is a data update
// Otherwise this is the initial data-link rendering call. Bind on this the first time it get called
linkCtx._toLk = 0; // Remove flag to skip unneccessary rebinding next time
if (linkFn._er) {
// data-link="exprUsingTagOrCvt with onerror=..." - e.g. {tag ... {cvt:... {:... convert='cvt'
try {
sourceValue = linkFn(source, view);
} catch (e) {
hasError = linkFn._er;
onError = onRenderError(e,view,(new Function("data,view", "return " + hasError + ";"))(source, view));
sourceValue = [{props: {}, args: [onError]}];
}
} else {
sourceValue = linkFn(source, view, $sub);
}
// Compiled link expression for linkTag: return value for data-link="{:xxx}" with no cvt or cvtBk, otherwise tagCtx or tagCtxs
attr = getTargetVal(sourceValue, linkCtx, tag = linkCtx.tag,
linkCtx.attr || defaultAttr(target, true, cvt !== undefined)
);
if (tag) {
// Existing tag instance
forceUpdate = hasError || tag._er;
// If the new tagCtxs hasError or the previous tagCtxs had error, then force update
sourceValue = sourceValue[0] ? sourceValue : [sourceValue];
noUpdate = !forceUpdate && eventArgs && tag.onUpdate && tag.onUpdate(ev, eventArgs, sourceValue) === false;
mergeCtxs(tag, sourceValue, forceUpdate);
if (noUpdate || attr === NONE) {
// onUpdate returned false, or attr === "none", or this is an update coming from the tag's own change event
// - so don't refresh the tag: we just use the new tagCtxs merged from the sourceValue,
// (which may optionally have been modifed in onUpdate()...) and then bind, and we are done
callAfterLink(tag, ev, eventArgs);
observeAndBind(linkCtx, source, target);
view.linkCtx = oldLinkCtx;
return;
}
if (tag._.chging) {
return;
}
if (tag.onUnbind) {
tag.onUnbind(tag.tagCtx, linkCtx, tag.ctx, ev, eventArgs);
}
sourceValue = tag.tagName === ":" // Call convertVal if it is a {{cvt:...}} - otherwise call renderTag
? $sub._cnvt(tag.cvt, view, sourceValue[0])
: $sub._tag(tag, view, view.tmpl, sourceValue, true, onError);
} else if (linkFn._tag) {
// For {{: ...}} without a convert or convertBack, we already have the sourceValue, and we are done
// For {{: ...}} with either cvt or cvtBack we call convertVal to get the sourceValue and instantiate the tag
// If cvt is undefined then this is a tag, and we call renderTag to get the rendered content and instantiate the tag
cvt = cvt === "" ? TRUE : cvt; // If there is a cvtBack but no cvt, set cvt to "true"
sourceValue = cvt // Call convertVal if it is a {{cvt:...}} - otherwise call renderTag
? $sub._cnvt(cvt, view, sourceValue[0] || sourceValue) // convertVal
: $sub._tag(linkFn._tag, view, view.tmpl, sourceValue, true, onError); // renderTag
addLinkMethods(tag = linkCtx.tag, true); // In both convertVal and renderTag we have instantiated a tag
attr = linkCtx.attr || attr; // linkCtx.attr may have been set to tag.attr during tag instantiation in renderTag
}
if (updateContent(sourceValue, linkCtx, attr, tag)
&& eventArgs
&& (onEvent = view.hlp(onAfterChangeStr))) {
onEvent.call(linkCtx, ev, eventArgs);
}
linkCtx._noUpd = 0; // For data-link="^{...}" remove _noUpd flag so updates on subsequent calls
if (tag) {
tag._er = hasError;
callAfterLink(tag, ev, eventArgs);
}
}
observeAndBind(linkCtx, source, target);
// Remove dynamically added linkCtx from view
view.linkCtx = oldLinkCtx;
}
}
function getTargetVal(sourceValue, linkCtx, tag, attr) {
var currentValue, setter, css, $target,
target = tag && tag.parentElem || linkCtx.elem;
if (sourceValue !== undefined) {
$target = $(target);
attr = tag && tag.attr || attr;
if ($isFunction(sourceValue)) {
error(linkCtx.expr + ": missing parens");
}
if (css = /^css-/.test(attr) && attr.slice(4)) {
currentValue = $.style(target, css);
if (+sourceValue === sourceValue) {
// Optimization for perf on integer values - e.g. css-width{:width+'px'}
currentValue = parseInt(currentValue);
}
} else if (attr !== "link") { // attr === "link" is for tag controls which do data binding but have no rendered output or target
if (attr === "value") {
if (target.type === CHECKBOX) {
currentValue = $target.prop(attr = CHECKED);
}
} else if (attr === RADIO) {
if (target.value === ("" + sourceValue)) {
currentValue = $target.prop(CHECKED);
} else {
return attr;
}
}
if (currentValue === undefined) {
setter = fnSetters[attr];
currentValue = setter ? $target[setter]() : $target.attr(attr);
}
}
linkCtx._val = currentValue;
}
return attr;
}
function setDefer(elem, value) {
elem._df = value; // Use both an expando and an attribute to track defered tokens. Attribute is needed for querySelectorAll for getViewInfos (childTags)
elem[(value ? "set" : "remove") + "Attribute"](deferAttr, "");
}
function updateContent(sourceValue, linkCtx, attr, tag) {
// When called for a tag, either in tag.refresh() or propertyChangeHandler(), returns a promise (and supports async)
// When called (in propertyChangeHandler) for target HTML returns true
// When called (in propertyChangeHandler) for other targets returns boolean for "changed"
var setter, prevNode, nextNode, promise, nodesToRemove, useProp, tokens, id, openIndex, closeIndex, testElem, nodeName, cStyle, jsvSel,
renders = attr !== NONE && sourceValue !== undefined && !linkCtx._noUpd, // For data-link="^{...}", don't update the first time (no initial render) - e.g. to leave server rendered values.
source = linkCtx.data,
target = tag && tag.parentElem || linkCtx.elem,
targetParent = target.parentNode,
$target = $(target),
view = linkCtx.view,
targetVal = linkCtx._val,
oldLinkCtx = view.linkCtx,
// If not a tag we can use the ._val obtained from getTargetVal()
// and only update when the new value (sourceValue) has changed from the previous one
change = tag;
if (tag) {
// Initialize the tag with element references
tag._.unlinked = true; // Set to unlinked, so initialization is triggered after re-rendering, e.g. for setting linkedElem, and calling onBind
tag.parentElem = tag.parentElem || (linkCtx.expr || tag._elCnt) ? target : targetParent;
prevNode = tag._prv;
nextNode = tag._nxt;
}
if (!renders) {
return;
}
if (attr === "visible") {
attr = "css-display";
}
if (/^css-/.test(attr)) {
if (linkCtx.attr === "visible") {
// Get the current display style
cStyle = (target.currentStyle || getComputedStyle.call(global, target, "")).display;
if (sourceValue) {
// We are showing the element.
// Get the cached 'visible' display value from the -jsvd expando
sourceValue = target._jsvd
// Or, if not yet cached, get the current display value
|| cStyle;
if (sourceValue === NONE && !(sourceValue = displayStyles[nodeName = target.nodeName])) {
// Currently display value is 'none', and the 'visible' style has not been cached.
// We create an element to find the correct 'visible' display style for this nodeName
testElem = document.createElement(nodeName);
document.body.appendChild(testElem);
// Get the default style for this HTML tag to use as 'visible' style
sourceValue
// and cache it as a hash against nodeName
= displayStyles[nodeName]
= (testElem.currentStyle || getComputedStyle.call(global, testElem, "")).display;
document.body.removeChild(testElem);
}
} else {
// We are hiding the element.
// Cache the current display value as 'visible' style, on _jsvd expando, for when we show the element again
target._jsvd = cStyle;
sourceValue = NONE; // Hide the element
}
}
if (change = change || targetVal !== sourceValue) {
$.style(target, attr.slice(4), sourceValue);
}
} else if (attr !== "link") { // attr === "link" is for tag controls which do data binding but have no rendered output or target
if (/^data-/.test(attr)) {
$.data(target, attr.slice(5), sourceValue); // Support for binding to data attributes: data-foo{:expr}: data-foo attribute will be
// expr.toString(), but $.data(element, "foo") and $(element).data("foo") will actually return value of expr, even if of type object
}
if (attr === CHECKED) {
useProp = true;
sourceValue = sourceValue && sourceValue !== "false";
// The string value "false" can occur with data-link="checked{attr:expr}" - as a result of attr, and hence using convertVal()
// We will set the "checked" property
// We will compare this with the current value
} else if (attr === RADIO) {
// This is a special binding attribute for radio buttons, which corresponds to the default 'to' binding.
// This allows binding both to value (for each input) and to the default checked radio button (for each input in named group,
// e.g. binding to parent data).
// Place value binding first: <input type="radio" data-link="value{:name} {:#get('data').data.currency:} " .../>
// or (allowing any order for the binding expressions):
// <input type="radio" value="{{:name}}" data-link="{:#get('data').data.currency:} value^{:name}" .../>
if (target.value === ("" + sourceValue)) {
// If the data value corresponds to the value attribute of this radio button input, set the checked property to true
sourceValue = useProp = true;
attr = CHECKED;
} else {
// Otherwise, go straight to observeAndBind, without updating.
// (The browser will remove the 'checked' attribute, when another radio button in the group is checked).
observeAndBind(linkCtx, source, target);
return;
}
} else if (attr === "selected" || attr === "disabled" || attr === "multiple" || attr === "readonly") {
sourceValue = (sourceValue && sourceValue !== "false") ? attr : null;
// Use attr, not prop, so when the options (for example) are changed dynamically, but include the previously selected value,
// they will still be selected after the change
} else if (attr === "value" && target.nodeName === "SELECT") {
target._jsvSel = $isArray(sourceValue)
? sourceValue
: "" + sourceValue; // If not array, coerce to string
}
if (setter = fnSetters[attr]) {
if (attr === HTML) {
// Set linkCtx on view, dynamically, just during this handler call
view.linkCtx = linkCtx;
if (tag && tag._.inline) {
nodesToRemove = tag.nodes(true);
if (tag._elCnt) {
if (prevNode && prevNode !== nextNode) {
// This prevNode will be removed from the DOM, so transfer the view tokens on prevNode to nextNode of this 'viewToRefresh'
transferViewTokens(prevNode, nextNode, target, tag._tgId, "^", true);
} else if (tokens = target._df) { // This occurs when there is no nextNode, and so the target._df may include tokens referencing
// view and tag bindings contained within the open and close tokens of the updated tag control. They need to be processed (disposed)
id = tag._tgId + "^";
openIndex = tokens.indexOf("#" + id) + 1;
closeIndex = tokens.indexOf("/" + id);
if (openIndex && closeIndex > 0) {
openIndex += id.length;
if (closeIndex > openIndex) {
setDefer(target, tokens.slice(0, openIndex) + tokens.slice(closeIndex));
disposeTokens(tokens.slice(openIndex, closeIndex));
}
}
}
prevNode = prevNode
? prevNode.previousSibling
: nextNode
? nextNode.previousSibling
: target.lastChild;
}
// Remove HTML nodes
$(nodesToRemove).remove(); // Note if !tag._elCnt removing the nodesToRemove will process and dispose view and tag bindings contained within the updated tag control
// Insert and link new content
promise = view.link(view.data, target, prevNode, nextNode, sourceValue, tag && {tag: tag._tgId, lazyLink: tag.tagCtx.props.lazyLink});
} else {
// data-linked value targeting innerHTML: data-link="html{:expr}" or contenteditable="true"
renders = renders && targetVal !== sourceValue;
if (renders) {
$target.empty();
}
if (renders) {
promise = view.link(source, target, prevNode, nextNode, sourceValue, tag && {tag: tag._tgId});
}
}
// Remove dynamically added linkCtx and ctx from view
view.linkCtx = oldLinkCtx;
} else {
if (change = change || targetVal !== sourceValue) {
if (attr === "text" && target.children && !target.children[0]) {
// This code is faster then $target.text()
if (target.textContent !== undefined) {
target.textContent = sourceValue;
} else {
target.innerText = sourceValue === null ? "" : sourceValue;
}
} else {
$target[setter](sourceValue);
}
}
if ((jsvSel = targetParent._jsvSel)
// Setting value of <option> element
&& (attr === "value" || !$target.attr("value"))) { // Setting value attribute, or setting textContent if attribute is null
// Set/unselect selection based on value set on parent <select>. Works for multiselect too
target.selected = $.inArray("" + sourceValue, $isArray(jsvSel) ? jsvSel : [jsvSel]) > -1;
}
}
} else if (change = change || targetVal !== sourceValue) {
// Setting an attribute to undefined should remove the attribute
$target[useProp ? "prop" : "attr"](attr, sourceValue === undefined && !useProp ? null : sourceValue);
}
linkCtx._val = sourceValue;
}
return promise || change;
}
function arrayChangeHandler(ev, eventArgs) {
var self = this,
onBeforeChange = self.hlp(onBeforeChangeStr),
onAfterChange = self.hlp(onAfterChangeStr);
if (!onBeforeChange || onBeforeChange.call(this, ev, eventArgs) !== false) {
if (eventArgs) {
// This is an observable action (not a trigger/handler call from pushValues, or similar, for which eventArgs will be null)
var action = eventArgs.change,
index = eventArgs.index,
items = eventArgs.items;
self._.srt = eventArgs.refresh; // true if part of a 'sort' on refresh
switch (action) {
case "insert":
self.addViews(index, items);
break;
case "remove":
self.removeViews(index, items.length);
break;
case "move":
self.removeViews(eventArgs.oldIndex, items.length, undefined, true); // remove
self.addViews(index, items); // re-insert
break;
case "refresh":
self._.srt = undefined;
self.fixIndex(0);
// Other cases: (e.g.undefined, for setProperty on observable object) etc. do nothing
}
}
if (onAfterChange) {
onAfterChange.call(this, ev, eventArgs);
}
}
}
//=============================
// Utilities for event handlers
//=============================
function setArrayChangeLink(view) {
// Add/remove arrayChange handler on view
var handler, arrayBinding,
type = view.type, // undefined if view is being removed
data = view.data,
bound = view._.bnd; // true for top-level link() or data-link="{for}", or the for tag instance for {^{for}} (or for any custom tag that has an onArrayChange handler)
if (!view._.useKey && bound) {
// This is an array view. (view._.useKey not defined => data is array), and is data-bound to collection change events
if (arrayBinding = view._.bndArr) {
// First remove the current handler if there is one
$([arrayBinding[1]]).off(arrayChangeStr, arrayBinding[0]);
view._.bndArr = undefined;
}
if (bound !== !!bound) {
// bound is not a boolean, so it is the data-linked tag that 'owns' this array binding - e.g. {^{for...}}
if (type) {
bound._.arrVws[view._.id] = view;
} else {
delete bound._.arrVws[view._.id]; // if view.type is undefined, view is being removed
}
} else if (type && data) {
// If this view is not being removed, but the data array has been replaced, then bind to the new data array
handler = function(ev) {
if (!(ev.data && ev.data.off)) {
// Skip if !!ev.data.off: - a handler that has already been removed (maybe was on handler collection at call time - then removed by another handler)
// If view.type is undefined, do nothing. (Corresponds to case where there is another handler on the same data whose
// effect was to remove this view, and which happened to precede this event in the trigger sequence. So although this
// event has been removed now, it is still called since already on the trigger sequence)
arrayChangeHandler.apply(view, arguments);
}
};
$([data]).on(arrayChangeStr, handler);
view._.bndArr = [handler, data];
}
}
}
function defaultAttr(elem, to, linkGetVal) {
// to: true - default attribute for setting data value on HTML element; false: default attribute for getting value from HTML element
// Merge in the default attribute bindings for this target element
var nodeName = elem.nodeName.toLowerCase(),
attr =
$subSettingsAdvanced._fe[nodeName] // get form element binding settings for input textarea select or optgroup
|| elem.contentEditable === TRUE && {to: HTML, from: HTML}; // Or if contentEditable set to "true" set attr to "html"
return attr
? (to
? ((nodeName === "input" && elem.type === RADIO) // For radio buttons, bind from value, but bind to 'radio' - special value.
? RADIO
: attr.to)
: attr.from)
: to
? linkGetVal ? "text" : HTML // Default innerText for data-link="a.b.c" or data-link="{:a.b.c}" (with or without converters)- otherwise innerHTML
: ""; // Default is not to bind from
}
//==============================
// Rendering and DOM insertion
//==============================
function renderAndLink(view, index, tmpl, views, data, context, refresh) {
var html, linkToNode, prevView, nodesToRemove, bindId,
parentNode = view.parentElem,
prevNode = view._prv,
nextNode = view._nxt,
elCnt = view._elCnt;
if (prevNode && prevNode.parentNode !== parentNode) {
error("Missing parentNode");
// Abandon, since node has already been removed, or wrapper element has been inserted between prevNode and parentNode
}
if (refresh) {
nodesToRemove = view.nodes();
if (elCnt && prevNode && prevNode !== nextNode) {
// This prevNode will be removed from the DOM, so transfer the view tokens on prevNode to nextNode of this 'viewToRefresh'
transferViewTokens(prevNode, nextNode, parentNode, view._.id, "_", true);
}
// Remove child views
view.removeViews(undefined, undefined, true);
linkToNode = nextNode;
if (elCnt) {
prevNode = prevNode
? prevNode.previousSibling
: nextNode
? nextNode.previousSibling
: parentNode.lastChild;
}
// Remove HTML nodes
$(nodesToRemove).remove();
for (bindId in view._.bnds) {
// The view bindings may have already been removed above in: $(nodesToRemove).remove();
// If not, remove them here:
removeViewBinding(bindId);
}
} else {
// addViews. Only called if view is of type "array"
if (index) {
// index is a number, so indexed view in view array
prevView = views[index - 1];
if (!prevView) {
return false; // If subview for provided index does not exist, do nothing
}
prevNode = prevView._nxt;
}
if (elCnt) {
linkToNode = prevNode;
prevNode = linkToNode
? linkToNode.previousSibling // There is a linkToNode, so insert after previousSibling, or at the beginning
: parentNode.lastChild; // If no prevView and no prevNode, index is 0 and the container is empty,
// so prevNode = linkToNode = null. But if prevView._nxt is null then we set prevNode to parentNode.lastChild
// (which must be before the prevView) so we insert after that node - and only link the inserted nodes
} else {
linkToNode = prevNode.nextSibling;
}
}
html = tmpl.render(data, context, view._.useKey && refresh, view, refresh || index, true);
// Pass in view._.useKey as test for noIteration (which corresponds to when self._.useKey > 0 and self.data is an array)
// Link the new HTML nodes to the data
view.link(data, parentNode, prevNode, linkToNode, html, prevView);
//}, 0);
}
//=====================
// addBindingMarkers
//=====================
function addBindingMarkers(value, view, tag) {
// Insert binding markers into the rendered template output, which will get converted to appropriate
// data-jsv attributes (element-only content) or script marker nodes (phrasing or flow content), in convertMarkers,
// within view.link, prior to inserting into the DOM. Linking will then bind based on these markers in the DOM.
// Added view markers: #m_...VIEW.../m_
// Added tag markers: #m^...TAG..../m^
var id, end;
if (tag) {
// This is a binding marker for a data-linked tag {^{...}}
end = "^`";
addLinkMethods(tag, true); // This is {^{>...}} or {^{tag ...}}, {{cvt:...} or {^{:...}}, and tag was defined in convertVal or renderTag
id = tag._tgId;
if (!id) {
bindingStore[id = bindingKey++] = tag; // Store the tag temporarily, ready for databinding.
// During linking, in addDataBinding, the tag will be attached to the linkCtx,
// and then in observeAndBind, bindingStore[bindId] will be replaced by binding info.
tag._tgId = "" + id;
}
} else {
// This is a binding marker for a view
// Add the view to the store of current linked views
end = "_`";
addLinkMethods(viewStore[id = view._.id] = view);
}
// Example: "#23^TheValue/23^"
return "#" + id + end
+ (value != undefined ? value : "") // For {^{:name}} this gives the equivalent semantics to compiled
// (v=data.name)!=null?v:""; used in {{:name}} or data-link="name"
+ "/" + id + end;
}
//==============================
// Data-linking and data binding
//==============================
//---------------
// observeAndBind
//---------------
function observeAndBind(linkCtx, source, target) { //TODO? linkFnArgs) {;
var binding, l, linkedElem, exprFnDeps, exprOb,
tag = linkCtx.tag,
cvtBk = linkCtx.convertBack,
depends = [],
bindId = linkCtx._bndId || "" + bindingKey++,
handler = linkCtx._hdl;
linkCtx._bndId = undefined;
if (tag) {
// Use the 'depends' paths set on linkCtx.tag - which may have been set on declaration
// or in events: init, render, onAfterLink etc.
depends = tag.depends || depends;
depends = $isFunction(depends) ? tag.depends(tag) : depends;
linkedElem = tag.linkedElem;
}
if (!linkCtx._depends || ("" + linkCtx._depends !== "" + depends)) {
// Only bind the first time, or if the new depends (toString) has changed from when last bound
if (linkCtx._depends) {
// Unobserve previous binding
$observable._apply(false, [source], linkCtx._depends, handler, true);
}
exprFnDeps = linkCtx.fn.deps.slice(); // Make a copy of the dependency paths for the compiled linkCtx expression - to pass to observe(). In getInnerCb(),
// (and whenever the object is updated, in innerCb), we will set exprOb.ob to the current object returned by that computed expression, for this view.
l = exprFnDeps.length;
while (l--) {
exprOb = exprFnDeps[l];
if (exprOb._jsv) {
// This path is an 'exprOb', corresponding to a computed, returning an object. We replace the exprOb by
// a view-binding-specific exprOb instance. The current object will be stored as exprOb.ob.
exprFnDeps[l] = $extend({}, exprOb);
}
}
binding = $observable._apply(
false,
[source],
exprFnDeps, // flatten the paths - to gather all the dependencies across args and bound params
depends,
handler,
linkCtx._ctxCb);
// The binding returned by $observe has a bnd array with the source objects of the individual bindings.
binding.elem = target; // The target of all the individual bindings
binding.linkCtx = linkCtx;
binding._tgId = bindId;
// Add to the _jsvBnd on the target the view id and binding id - for unbinding when the target element is removed
target._jsvBnd = target._jsvBnd || "";
target._jsvBnd += "&" + bindId;
linkCtx._depends = depends;
// Store the binding key on the view, for disposal when the view is removed
linkCtx.view._.bnds[bindId] = bindId;
// Store the binding.
bindingStore[bindId] = binding; // Note: If this corresponds to a data-linked tag, we are replacing the
// temporarily stored tag by the stored binding. The tag will now be at binding.linkCtx.tag
if (linkedElem) {
binding.to = [[], cvtBk];
}
if (linkedElem || cvtBk !== undefined) {
bindTo(binding, tag, linkedElem && linkedElem[0] || target, cvtBk);
}
if (tag) {
if (!tag.flow && !tag._.inline) {
target.setAttribute(jsvAttrStr, (target.getAttribute(jsvAttrStr)||"") + "#" + bindId + "^/" + bindId + "^");
tag._tgId = "" + bindId;
}
}
}
if (linkedElem && linkedElem[0]) {
l = linkedElem.length;
while (l--) {
linkedElem[l]._jsvBnd = linkedElem[l]._jsvBnd || (target._jsvBnd + "+");
// Add a "+" for cloned binding - so removing elems with cloned bindings will not remove the 'parent' binding from the bindingStore.
linkedElem[l]._jsvLkEl = tag;
}
}
}
//-------
// $.link
//-------
function tmplLink(to, from, context, noIteration, parentView, prevNode, nextNode) {
return $link(this, to, from, context, noIteration, parentView, prevNode, nextNode);
}
function $link(tmplOrLinkExpr, to, from, context, noIteration, parentView, prevNode, nextNode) {
// When linking from a template, prevNode and nextNode parameters are ignored
if (context === true) {
noIteration = context; // passing boolean as third param - noIteration
context = undefined;
} else if (typeof context !== "object") {
context = undefined; // context must be a boolean (noIteration) or a plain object
} else {
context = $extend({}, context);
}
if (tmplOrLinkExpr && to) {
to = to.jquery ? to : $(to); // to is a jquery object or an element or selector
if (!activeBody) {
activeBody = document.body;
$(activeBody)
.on(elementChangeStr, elemChangeHandler)
.on('blur', '[contenteditable]', elemChangeHandler);
}
var i, k, html, vwInfos, view, placeholderParent, targetEl, refresh, topLevelCall,
onRender = addBindingMarkers,
replaceMode = context && context.target === "replace",
l = to.length;
while (l--) {
targetEl = to[l];
parentView = parentView || $view(targetEl);
if (topLevelCall = parentView === topView) {
topView.data = (topView.ctx = context || {}).root = from;
}
if ("" + tmplOrLinkExpr === tmplOrLinkExpr) {
// tmplOrLinkExpr is a string: treat as data-link expression.
addDataBinding(tmplOrLinkExpr, targetEl, parentView, undefined, true, from, context);
} else {
if (tmplOrLinkExpr.markup !== undefined) {
// This is a call to template.link()
if (replaceMode) {
placeholderParent = targetEl.parentNode;
}
html = tmplOrLinkExpr.render(from, context, noIteration, parentView, undefined, onRender);
// TODO Consider finding a way to bind data (link) within template without html being different for each view, the HTML can
// be evaluated once outside the while (l--), and pushed into a document fragment, then cloned and inserted at each target.
if (placeholderParent) {
// This is target="replace" mode
prevNode = targetEl.previousSibling;
nextNode = targetEl.nextSibling;
$.cleanData([targetEl], true);
placeholderParent.removeChild(targetEl);
targetEl = placeholderParent;
} else {
prevNode = nextNode = undefined; // When linking from a template, prevNode and nextNode parameters are ignored
$(targetEl).empty();
}
} else if (tmplOrLinkExpr === true && parentView === topView) {
// $.link(true, selector, data, ctx) - where selector points to elem in top-level content. (If not top-level content, no-op)
refresh = {lnk: 1};
} else {
break;
}
// TODO Consider deferred linking API feature on per-template basis - {@{ instead of {^{ which allows the user to see the rendered content
// before that content is linked, with better perceived perf. Have view.link return a deferred, and pass that to onAfterLink...
// or something along those lines.
// setTimeout(function() {
if (targetEl._df && !nextNode) {
// We are inserting new content and the target element has some deferred binding annotations,and there is no nextNode.
// Those views may be stale views (that will be recreated in this new linking action) so we will first remove them
// (if not already removed).
vwInfos = viewInfos(targetEl._df, true, rOpenViewMarkers);
for (i = 0, k = vwInfos.length; i < k; i++) {
view = vwInfos[i];
if ((view = viewStore[view.id]) && view.data !== undefined) {
// If this is the _prv (prevNode) for a view, remove the view
// - unless view.data is undefined, in which case it is already being removed
view.parent.removeViews(view._.key, undefined, true);
}
}
setDefer(targetEl); // remove defer tokens
}
// Link the content of the element, since this is a call to template.link(), or to $(el).link(true, ...),
parentView.link(from, targetEl, prevNode, nextNode, html, refresh, context);
//}, 0);
}
if (topLevelCall) {
topView.data = topView.ctx = undefined;
}
}
}
return to; // Allow chaining, to attach event handlers, etc.
}
//----------
// view.link
//----------
function viewLink(outerData, parentNode, prevNode, nextNode, html, refresh, context, validateOnly) {
// Optionally insert HTML into DOM using documentFragments (and wrapping HTML appropriately).
// Data-link existing contents of parentNode, or the inserted HTML, if provided
// Depending on the content model for the HTML elements, the standard data-linking markers inserted in the HTML by addBindingMarkers during
// template rendering will be converted either to script marker nodes or, for element-only content sections, to data-jsv element annotations.
// Data-linking will then add _prv and _nxt to views, where:
// _prv: References the previous node (script element of type "jsv123"), or (for elCnt=true), the first element node in the view (or if none, set _prv = _nxt)
// _nxt: References the last node (script element of type "jsv/123"), or (for elCnt=true), the next element node after the view.
//==== nested functions ====
function convertMarkers(all, preceding, selfClose, closeTag, spaceBefore, id, boundId, spaceAfter, tag1, tag2, closeTag2, spaceAfterClose, selfClose2, endOpenTag) {
// rConvertMarkers = /(^|(\/>)|<\/(\w+)>|)(\s*)([#\/]\d+(?:_|(\^)))`(\s*)(<\w+(?=[\s\/>]))?|\s*(?:(<\w+(?=[\s\/>]))|<\/(\w+)>(\s*)|(\/>)\s*|(>))/g,
// prec, slfCl, clsTag, spBefore, id, bndId spAfter,tag1, tag2, clTag2,sac slfCl2, endOpenTag
// Convert the markers that were included by addBindingMarkers in template output, to appropriate DOM annotations:
// data-jsv attributes (for element-only content) or script marker nodes (within phrasing or flow content).
// TODO consider detecting 'quoted' contexts (attribute strings) so that attribute encoding does not need to encode >
// Currently rAttrEncode = /[><"'&]/g includes '>' encoding in order to avoid erroneous parsing of <span title="<a/>"></span>">
var errorMsg, bndId,
endOfElCnt = "";
if (endOpenTag) {