dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
105 lines (96 loc) • 4.8 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Android Repeat Data Example</title>
<link href="../../../../../dojox/mobile/themes/android/android.css" rel="stylesheet"/>
<link href="../css/android-format.css" rel="stylesheet"/>
<!-- use below for iPhone theme
<link href="../../../../../dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>
<link href="../css/iphone-format.css" rel="stylesheet"></link>
-->
<script type="text/javascript" src="../../../../../dojo/dojo.js" djConfig="parseOnLoad: false, isDebug: true"></script>
<script language="JavaScript" type="text/javascript">
//dojo.require("dojo.parser");
dojo.require("dojox.mobile.parser"); // dojox.mobile.parser did not work
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.TextBox");
dojo.require("dojox.mobile.Button");
dojo.require("dojox.mvc");
dojo.require("dojox.mvc.Group");
dojo.require("dojox.mvc.Repeat");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.store.DataStore");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
var model, selectedIndex = 0, nextIndexToAdd, theModelPromise;
function setup() {
var writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
var modelPromise = dojox.mvc.newStatefulModel({store: new dojo.store.DataStore({store: writeStore}), query:{"Location" : "CA"}}); // example of using a query parm for Location
modelPromise.then(function(results){
model = results;
nextIndexToAdd = model.data.length;
//dojo.parser.parse();
dojox.mobile.parser.parse();
});
};
dojo.ready(setup);
</script>
</head>
<body>
<h1 dojoType="dojox.mobile.Heading">Android Repeat Data Binding Example.</h1>
<div >Search Results:</div>
<div dojoType="dojox.mvc.Repeat" class="row" ref="model">
<div class="row" dojoType="dojox.mvc.Group" ref="'rel:${this.index}'">
<input dojoType="dojox.mobile.TextBox"
id="nameInput${this.index}" ref="'rel:First'" placeHolder="First Name"/>
<button id="details${this.index}" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setDetailsContext('${this.index}')">Details</button>
</div>
</div>
<div class="spacer"></div>
<div dojoType="dojox.mvc.Group" ref="model">
<div id="detailsBanner">Details for selected index:</div>
<div id="detailsGroup" dojoType="dojox.mvc.Group" ref="'rel:0'">
<div><label for="firstInput">First Name:</label></div>
<div><input id="firstInput" dojoType="dojox.mobile.TextBox" ref="'rel:First'" placeHolder="First Name"/></div>
<div><label for="lastInput">Last Name:</label></div>
<div><input id="lastInput" dojoType="dojox.mobile.TextBox" ref="'rel:Last'" placeHolder="Last Name"/></div>
<div><label for="emailInput">Email:</label></div>
<div><input id="emailInput" dojoType="dojox.mobile.TextBox" ref="'rel:Email'" placeHolder="Email"/></div>
<div><label for="telInput">Telephone:</label></div>
<div><input id="telInput" dojoType="dojox.mobile.TextBox" ref="'rel:Tel'" placeHolder="Telephone"/></div>
<div><label for="faxInput">Fax:</label></div>
<div><input id="faxInput" dojoType="dojox.mobile.TextBox" ref="'rel:Fax'" placeHolder="Fax"/></div>
</div>
</div>
<div class="spacer"></div>
<button id="add" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="insertResult(nextIndexToAdd)">Add</button>
<button id="save" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="console.log(model[selectedIndex].toPlainObject());model[selectedIndex].commit()">Save</button>
<button id="reset" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
<script type="text/javascript">
function setDetailsContext(index){
selectedIndex = index;
var groupRoot = dijit.byId("detailsGroup");
groupRoot.set("ref", index);
}
function insertResult(index){
if (model[index-1].First.value !== ""){ // TODO: figure out why we are getting called twice for each click
var insert = dojox.mvc.newStatefulModel({ "data" : {
"First" : "",
"Last" : "",
"Location": "CA",
"Office" : "",
"Email" : "",
"Tel" : "",
"Fax" : ""}
});
model.add(index, insert);
setDetailsContext(index);
nextIndexToAdd++;
}else{
setDetailsContext(index-1);
}
}
</script>
</body>
</html>