本文说的页面修改功能流程如下:
在文章详细页面中,点击修改按钮,打开修改页面,修改后关闭当前页面,返回文章详细页面,此时的数据还是修改前的数据,
为了让文章详细页面的数据更新,当修改成功后发送事件,在修改页面中增加监听事件,当监听到刷新事件后,就查询数据库并更新页面
道理说清楚后开始编码
修改页面:
html代码
标题:<input id="title" type="text" /><br />
内容:<input id="content" type="text" /><br />
<input type="button" value="更新" onclick="update()" />
js代码
var articleId;
apiready = function(){
articleId=api.pageParam.id;
showById();
};
function showById(){
var client = new Resource(APP_INFO.app_id, APP_INFO.app_key);
var Model = client.Factory("article");
Model.get({"_id":articleId}, function(ret,err){
if(err){
//处理错误 err
}else{
//处理数据 ret
alert(JSON.stringify(ret));
$("#title").val(ret.title);
$("#content").val(ret.content);
$("#author").val(ret.creatorName);
$("#viewNum").val(ret.viewNum);
}
})
}
function update(){
var client = new Resource(APP_INFO.app_id, APP_INFO.app_key);
var Model = client.Factory("article");
Model.save(
{"_id":articleId},
{
"title":$("#title").val(),
"content":$("#content").val(),
}, function(ret,err){
if(err){
//处理错误 err
}else{
//处理数据 ret
//alert(JSON.stringify(ret));
api.sendEvent({
name: 'article_detail_reload',
extra: {
id: articleId
}
});
api.closeWin({});
}
})
}
更新成功后就发送article_detail_reload事件
文章详细页面:
在apicloud根据id进行查询-文章详细页面中的apiready函数中增加如下代码:
api.addEventListener({
name: 'article_detail_reload'
}, function(ret, err) {
//alert(JSON.stringify(ret));
if(ret){
//alert(ret.value.id);//注意封装在ret.value中
articleId=ret.value.id;
showById();
}
});
当监听到article_detail_reload事件后就再次调用showById()函数