-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathviewmodel-populate-db.html
76 lines (53 loc) · 2.29 KB
/
viewmodel-populate-db.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
<head>
<title>viewmodel-populate-db</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Viewmodel populate input fields from database example</h1>
<p>Populates the input field with a value form the database</p>
<p>Uses 2-way binding to validate that input field has a value.</p>
<p>If has value, submit is enabled</p>
<hr/>
{{> fail}}
<hr/>
{{> initsOnly}}
<hr/>
{{> success}}
</div>
</div>
</div>
</body>
<template name="fail">
<h3>Fails</h3>
<p>Not setting input with db value, because viewmodel doesn't update values reactively (only functions)</p>
<form>
<div class="form-group" data-bind="class: {has-success: allValid}">
<label>Update value</label>
<input class="form-control" type="text" data-bind="value: dbValue" placeholder="database value"/>
<button class="btn btn-primary" type="submit" data-bind="enabled: allValid, click: submit"> Submit </button>
<div data-bind="text: result"></div>
</div>
</form>
</template>
<template name="initsOnly">
<h3>No 2-way binding</h3>
<p>Binds value from DB, but no 2-way binding (try change value and press submit to show result). Also note that the validation is always true, because viewmodel validates the initial static value</p>
<div class="form-group" data-bind="class: {has-success: allValid}">
<label>Update value</label>
<input class="form-control" type="text" data-bind="value: dbValue" placeholder="database value"/>
<button class="btn btn-primary" type="submit" data-bind="enabled: allValid, click: submit"> Submit </button>
<div data-bind="text: result"></div>
</div>
</template>
<template name="success">
<h3>Success</h3>
<p>2-way binding, but in a very non-viewmodel way using jquery and spaghetti code.</p>
<div class="form-group" data-bind="class: {has-success: allValid}">
<label>Update value</label>
<input class="form-control" id="value" type="text" data-bind="value: dbValue, keyup: checkValue" placeholder="database value"/>
<button class="btn btn-primary" type="submit" data-bind="enabled: allValid, click: submit"> Submit </button>
<div data-bind="text: result"></div>
</div>
</template>