将admin.html划分为几个模块.
页面逻辑
新建歌曲
当点击新建歌曲时, new-song高亮.
在song-form中填入歌曲信息, 点击保存后, 将歌曲加入到song-list中, 同时在leanCloud的Song中创建歌曲信息.
song-list中加入歌曲项后, 高亮这个新添加的歌曲.
上传歌曲
点击左下方的区域, 上传文件, 上传成功后, 歌曲信息自动填入song-form中. 同时在七牛数据库中创建信息.
点击保存后, 执行【新建歌曲】的操作.
修改歌曲
点击歌曲列表(song-list)中的一项, 这个歌曲项高亮.
同时将此歌曲的信息填入song-form中进行更改.
更改完成后点击保存. 保存后将歌曲信息更新到leanCloud.
注意song-list中此歌曲一直是高亮状态
上面的逻辑可以使用发布订阅模式实现. 请往下看.
leanCloud和七牛的区别.
七牛和leanCloud都是后端存储数据用的. 七牛存储的是歌曲实体. 而leanCloud存储的歌曲具体的信息. 这两个都有数据库的功能
new事件
new事件表示这是一首新歌. 这个事件有两个逻辑需要处理.
- 当点击new-song模块时, new-song模块高亮, 触发new事件
- 上传歌曲(upload-song)成功后, 触发new事件
先解决第一个.
在new-song模块中注册new事件. 表示当new事件出发时, new-song模块高亮. 因为点击new-song模块就触发new事件, 所以也将触发事件写入.
window.eventHub.on('new', (data)=>{
this.active()//添加active类
})
//$(this.view.el)表示当前元素
$(this.view.el).on('click', ()=>{
window.eventHub.emit('new')
})
第二个.
加入上传歌曲成功后, 歌曲信息会自动填入表单(song-form). 点击保存才会在歌曲列表(song-list)中出现上传的歌曲.
在song-list和song-form中分别注册new事件. song-list中的new事件用于清除歌曲列表中的高亮, 因为是上传歌曲, 所以其他歌曲不能高亮. 高亮的只能是新上传的歌曲(当然, 要将新上传的歌曲插入歌曲列表中, 这就是等会中要做的事情). song-form中的new事件用来干啥呢, song-form中的new用于更新歌曲数据, 并将上传歌曲的信息填入song-form的表单中.
//song-list.js
window.eventHub.on('new', ()=>{
this.view.clearActive()
})
//song-form.js
window.eventHub.on('new', (data)=>{
if(this.model.data.id) {
this.model.data = {
name: '', url: '', id: '', singer: ''
}
} else {
Object.assign(this.model.data, data)
}
this.view.render(this.model.data)//将上传歌曲填入表单, 重新渲染表单
})
那么, upload-song中只需触发new事件就可以了.
window.eventHub.emit('new', {
url: sourceLink,
name: response.key
});
注意, event-hub.js模块是发布订阅模式的实现, eventHub中的events对象类似为:
events: {
"new", [func1, func2]
}
即当触发new事件时, func1, func2会一次触发.
create事件
create事件用于在歌曲列表中创建歌曲项. 在song-list中注册create事件用于创建歌曲项. 这个只有在创建歌曲的时候才会触发.
//song-list.js
window.eventHub.on('create', (songData)=>{
this.model.data.songs.push(songData)
this.view.render(this.model.data)
})
//song-form.js
//这个函数用于在leanCloud创建对象.
create(){
let needs = 'name singer url'.split(' ')
let data = {}
needs.map((string)=>{
data[string] = this.view.$el.find(`[name="${string}"]`).val()
})
//create(data)是leanCloud官方API.
this.model.create(data)
.then(()=>{
this.view.reset()
let string = JSON.stringify(this.model.data)
let object = JSON.parse(string)
window.eventHub.emit('create', object) //触发create事件
}, (err)=>{
console.log(err)
})
}
//create(data)
create(data) {
// 声明类型
var Song = AV.Object.extend('Song');
// 新建对象
var song = new Song();
// 设置名称
song.set('name', data.name);
song.set('singer', data.singer);
song.set('url', data.url);
return song.save().then((newSong) =>{
let {id , attributes} = newSong
Object.assign(this.data, {id, ...attributes})
}, (error)=> {
console.error(error);
});
}
update事件
update事件用于更新歌曲信息, 歌曲信息
我们在song-list上注册update事件, 当在song-form中修改歌曲信息时, 触发update事件, 同时要更新leanCloud中的数据.
//song-list.js
window.eventHub.on('update', (song)=>{
let songs = this.model.data.songs
for (let i = 0; i < songs.length; i++) {
if (songs[i].id === song.id) {
Object.assign(songs[i], song)
}
}
this.view.render(this.model.data)//重新渲染
})
//song-form.js
update(){
let needs = 'name singer url'.split(' ')
let data = {}
needs.map((string)=>{
data[string] = this.view.$el.find(`[name="${string}"]`).val()
})
//update(data)是leanCloud官方API
this.model.update(data)
.then(()=>{
//触发更新事件
window.eventHub.emit('update', JSON.parse(JSON.stringify(this.model.data)))
})
}
//updata(data)
update(data){
var song = AV.Object.createWithoutData('Song', this.data.id)
song.set('name', data.name)
song.set('singer', data.singer)
song.set('url', data.url)
return song.save().then((response)=>{
Object.assign(this.data, data)
return response
}, (err)=>{
console.log(err)
})
}
select事件
select事件也用于两件事. 或者说两个逻辑.
- 当点击歌曲列表(song-list)中的某一项时, new-song模块的高亮消失, 而被点击的那一项高亮.
- 被点击的歌曲同时会被渲染到song-form中.
//new-song.js
window.eventHub.on('select', (data)=>{
this.deactive() //清除高亮
})
//song-form.js
window.eventHub.on('select', (data)=>{
this.model.data = data
this.view.render(this.model.data)
})
什么时候触发呢, 当然是点击歌曲的时候触发.
$(this.view.el).on('click', 'li', (e)=>{
let songId = e.currentTarget.getAttribute('data-song-id')
this.model.data.selectedSongID = songId
this.view.render(this.model.data)
let data
let songs = this.model.data.songs
//找到被点击的歌曲
for (let i = 0; i < songs.length; i++) {
if (songs[i].id === songId) {
data = songs[i]
break
}
}
let string = JSON.stringify(data)
let object = JSON.parse(string)
//触发select事件
window.eventHub.emit('select', object)
})
参考:
https://leancloud.cn/docs/leanstorage_guide-js.html#hash632314851
https://leancloud.cn/docs/leanstorage_guide-js.html#hash1025913543
https://leancloud.cn/docs/leanstorage_guide-js.html#hash810954180
https://leancloud.cn/docs/leanstorage_guide-js.html#hash787692837