<!-- Tests features for updating a view automatically based on properties
in a model. Ie. binding views to model properties. -->
<html>
<head>
<script type="text/javascript" src="../storkCore.js">
</script>
<script type="text/javascript" src="../bean.js">
</script>
</head>
<body>
<p>
The following person should be Setok:
</p>
<table id="person">
<tr>
<th>Name</th>
<td id="name"></td>
</tr>
<tr>
<th>Phone Number</th>
<td id="phone"></td>
</tr>
</table>
<p>
The following should contain an exact replica of the first, within
the red borders, even
reflecting
the same model changes:
</p>
<div id="twinperson" style="border: solid 1px red;">
</div>
<p>
The following person should have a completely different model,
with the person being Senna
(in green borders):
</p>
<div id="newperson" style="border: solid 1px green;">
</div>
<p id="attrTest">
<span id="changeattr" class="foo">Check class of this element changed to "bar"</span>
</p>
<div id="imageviewer">
<p>
The following should show a Caterham 7:
</p>
<img id="showimg" src="" />
</div>
<p id="colourTest">
The colour of the day is: <span id="dayColour"></span>.
(Should be British Racing Green)
</p>
<p id="random">
Here's a random number: <span id="rndNumber"></span>.
</p>
<script type="text/javascript">
// Set details of an example person. Basic link testing.
var personView = clone(StorkHtmlView);
personView.linkPropertyToText("personName", "name");
personView.linkPropertyToText("phone", "phone");
personView.attach(elementByID("person"));
StorkModel.setProperties({personName: "Kris", phone: "04224242"});
personView.setModel(StorkModel);
var personView2 = clone(personView);
personView2.appendToElement(elementByID("twinperson"));
var differentPerson = clone(personView2);
differentPerson.appendToElement(elementByID("newperson"));
var differentModel = clone(StorkModel);
differentModel.setProperty("oersonName", "Senna");
differentModel.setProperty("phone", "31337");
differentPerson.setModel(differentModel);
StorkModel.setProperty("name", "King");
// Switch name of first (and thus second) person, every second
var king = 1;
setInterval(function() {
if (king) {
StorkModel.setProperty("personName", "Setok");
} else {
StorkModel.setProperty("personName", "King");
}
king = king ^ 1;
}, 1000);
// Test attribute linking
var classChangeView = clone(StorkHtmlView);
var model2 = clone(StorkModel);
classChangeView.linkPropertyToAttr("class", "changeattr", "class");
classChangeView.attach(elementByID("attrTest"));
model2.setProperties({class: "bar"});
classChangeView.setModel(model2);
// Test mapping StorkModel properties to attribute values.
var imgView = clone(StorkHtmlView);
var imgModel = clone(StorkModel);
imgView.mapPropertyToAttr("image", "showimg", "src", {
woman: "images/jris3.jpg",
car: "images/christening.jpg"
});
imgView.attach(elementByID("imageviewer"));
imgModel.setProperties({image: "car"});
imgView.setModel(imgModel);
// Test linking a property to a method
var colourView = clone(StorkHtmlView);
var colourModel = clone(StorkModel);
colourView.colourUpdate = function(property, elementIDMap) {
var colour;
colour = this.model.getProperty(property);
var element = elementIDMap["colourElement"];
element = elementByID(element);
emptyElement(element);
if (colour == "green") {
setTextOfElement(element, "British Racing Green");
} else {
setTextOfElement(element, "Ferrari Red");
}
}
colourView.linkPropertyToMethod("colour", "colourUpdate",
{colourElement: "dayColour"});
colourModel.setProperties({colour: "green"});
colourView.attach(elementByID("colourTest"));
colourView.setModel(colourModel);
// Test linking to a property provided by a method in the model
var rndView = clone(StorkHtmlView);
rndView.attach(elementByID("random"));
rndView.linkPropertyMethodToText("number", "rndNumber");
var rndModel = clone(StorkModel);
rndModel.number = function() {
return Math.random();
}
rndView.setModel(rndModel);
</script>
</body>
</html>