/
observing-paths.html
134 lines (116 loc) · 4.41 KB
/
observing-paths.html
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
<!DOCTYPE html>
<html>
<head>
<link href="../../resources/presentation.css" rel="stylesheet" type="text/css" />
<link href="../../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
<script src="../../resources/syntaxhighlighter.min.js" type="text/javascript"></script>
<link href="../../resources/demos.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../../jsviews.js" type="text/javascript"></script>
</head>
<body>
<div class="nav"><a href="../../demos.html">JsViews Demos</a></div>
<h3>Data-linking to deep paths - observing changes higher up the path</h3>
<div class="box label">By default, binding to a path such as <b>app.selected.name.first</b> will 'observe' changes at the leaf level only. <br />
To observe changes higher up the path, such as swapping the <b>app.selected</b> object (selected person), replace the <b>'.'</b> by <b>'^'</b>
immediately after the highest-level item to be 'observed'.
<br /><br />For paths in which objects higher in the path may sometimes be null or undefined,
add <b>onError=null</b> or <b>onError=''</b> in order to suppress error rendering and default to an empty string.
<br /><br />Example: <b><pre><div data-link="selected^name.first onError=null "></div></pre></b></div>
<!--====== Containers ======-->
<div class="box">
<div class="subhead">Observing changes to object properties higher up the path<br /></div>
<table id="peopleList"></table>
</div>
<div class="box">
<div class="subhead">Data-bound tag — {^{>selected^name.first onError=null }}:<br /></div>
<div id="nameSection"></div>
</div>
<!--====== Templates ======-->
<script id="peopleTmpl" type="text/x-jsrender">
<tbody><tr><td colspan="2"><button id="addBtn">Add</button> <button id="removeBtn" data-link="disabled{:!selected}">Remove</button></td></tr></tbody>
<tbody>
<tr>
<td colspan="2">
<select data-link="{getIndex: selected array=people :setObject}" size="5" class="full">
<option value="0">Choose a person to edit</option>
{^{for people}}
<option data-link="{:name.first + ' ' + name.last} value{:#index + 1} selected{:#data === ~root.selected}"></option>
{{/for}}
</select>
</td>
</tr>
<tr>
<td><input data-link="{:selected^name.first onError=null trigger=true :} disabled{:!selected}" /></td>
<td><input data-link="{:selected^name.last onError=null trigger=true :} disabled{:!selected}" /></td>
</tr>
<tr>
<td colspan="2" data-link="selected^name.first + ' ' + selected^name.last onError=null "></td>
</tr>
</tbody>
</script>
<script id="nameTmpl" type="text/x-jsrender">
{^{>selected^name.first onError=null }} {^{>selected^name.last onError=null }}
</script>
<!--====== Script ======-->
<script type="text/javascript">
//$.views.settings.tryCatch = false;
//====================== Data ======================
var people = [{
name: {
first: "Jeff",
last: "Friedman"
}
},{
name: {
first: "Adriana",
last: "Jones"
}
},{
name: {
first: "Rosa",
last: "Lee"
}
}];
var app = {
people: people,
selected: people[0]
};
//=========== Register converters ===========
$.views.converters({
getIndex: function(val) {
return ($.inArray(val, this.tagCtx.props.array) + 1) || "0";
},
setObject: function(val) {
var selectedObject = this.tagCtx.props.array[val-1];
$.observable(this.linkCtx.data).setProperty(this.linkCtx.fn.paths[0], selectedObject);
return this.tagCtx.props.array[val-1];
}
});
//================ Compile template and link ================
$.templates({
peopleTmpl: "#peopleTmpl",
nameTmpl: "#nameTmpl"
});
// Data-link details container to people, using the peopleTmpl template
$.link.peopleTmpl( "#peopleList", app);
$.link.nameTmpl( "#nameSection", app, { target: "replace" });
$("#addBtn").on("click", function(){
$.observable(app.people).insert({name: {first: "first", last: "last"}});
$.observable(app).setProperty("selected", app.people[app.people.length-1]);
})
$("#removeBtn").on("click", function(){
$.observable(app.people).remove($.inArray(app.selected, app.people));
$.observable(app).setProperty("selected", null);
})
</script>
<!--================ End of Demo Section ================-->
<h4>HTML:</h4>
<pre class="brush: xml;">
<!-- data-linking-->
<input data-link="selected^name.first onError=null " />
<!-- data-bound tag-->
{^{>selected^name.first onError=null }}
</pre>
</body>
</html>