gregory-h
commented
12 years ago <!DOCTYPE html>
<html>
<head>
<title>Agility.js JQM test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/js/agility.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
var item = $$({}, '<li><a id="content" data-bind="content"></a><a id="close"></a></li>', '& a { cursor:pointer; }', {
'click #content': function(){
var input = prompt('Edit to-do item:', this.model.get('content'));
if (!input) return;
this.model.set({content:input});
},
'click #close': function(){
this.destroy();
},
'change' : function(e) {
console.log('changed.. invoke JQM refresh here if necessary');
}
});
var list = $$({}, '<div id="pwelcome" data-role="page">\
<button id="new">New item</button><p>\
<ul id="pwelcome-content" data-role="listview" data-filter="true" data-inset="true" data-split-icon="delete" ><p/><p/><p/></p>\
</ul></div>', {
'click #new': function(){
var newItem = $$(item, {content:'Click to edit'});
this.append(newItem, 'ul'); // add to container, appending at <ul>
},
'create' : function() {
$('#pwelcome-content').trigger('create')
},
'append' : function(e) {
$('#pwelcome-content').listview('refresh');
}
});
$$.document.append(list);
</script>
</body>
</html>
I would like to consider Agility for my JQM project but can't get a basic example of JQM + Agility working and can't find anyone discussing the combination.
JQM is 'page' oriented and has its own event driven page activation model and api that must be invoked to post-process controls after appending elements to things like listviews. Perhaps that is the rub, but for anyone listening the following is a simple test page that should put the todo example into a JQM context. The console logs appear reasonable but the UI fails to display any content beyond 'Welcome'.
Suggestions appreciated.
<!DOCTYPE html>
Welcome