修改歌曲

修改歌曲

将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事件表示这是一首新歌. 这个事件有两个逻辑需要处理.

1. 当点击new-song模块时, new-song模块高亮, 触发new事件
2. 上传歌曲(upload-song)成功后, 触发new事件

先解决第一个.
在new-song模块中注册new事件. 表示当new事件出发时, new-song模块高亮. 因为点击new-song模块就触发new事件, 所以也将触发事件写入.

('new', (data)=>{this.active()//添加active类
})
//$(this.view.el)表示当前元素
$(this.view.el).on('click', ()=>{it('new')
})

第二个.
加入上传歌曲成功后, 歌曲信息会自动填入表单(song-form). 点击保存才会在歌曲列表(song-list)中出现上传的歌曲.
在song-list和song-form中分别注册new事件. song-list中的new事件用于清除歌曲列表中的高亮, 因为是上传歌曲, 所以其他歌曲不能高亮. 高亮的只能是新上传的歌曲(当然, 要将新上传的歌曲插入歌曲列表中, 这就是等会中要做的事情). song-form中的new事件用来干啥呢, song-form中的new用于更新歌曲数据, 并将上传歌曲的信息填入song-form的表单中.

//song-list.js
('new', ()=>{this.view.clearActive()
})//song-form.js
('new', (data)=>{del.data.id) {del.data = {name: '', url: '', id: '', singer: ''}} else {Object.del.data, data)}del.data)//将上传歌曲填入表单, 重新渲染表单
})

那么, upload-song中只需触发new事件就可以了.

it('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
('create', (songData)=>{del.data.songs.push(songData)del.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官方ate(data).then(()=>{set()let string = JSON.del.data)let object = JSON.parse(string)it('create', object)   //触发create事件}, (err)=>{console.log(err)})
}//create(data)
create(data) {// 声明类型var Song = d('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} = newSongObject.assign(this.data, {id, ...attributes})}, (error)=> {(error);});
}

update事件

update事件用于更新歌曲信息, 歌曲信息
我们在song-list上注册update事件, 当在song-form中修改歌曲信息时, 触发update事件, 同时要更新leanCloud中的数据.

//song-list.js
('update', (song)=>{let songs = del.data.songsfor (let i = 0; i < songs.length; i++) {if (songs[i].id === song.id) {Object.assign(songs[i], song)}}del.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官方del.update(data).then(()=>{//触发更新事件it('update', JSON.parse(JSON.del.data)))})
}//updata(data)
update(data){var song = ateWithoutData('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事件也用于两件事. 或者说两个逻辑.

1. 当点击歌曲列表(song-list)中的某一项时, new-song模块的高亮消失, 而被点击的那一项高亮.
2. 被点击的歌曲同时会被渲染到song-form中.

//new-song.js
('select', (data)=>{this.deactive() //清除高亮
})//song-form.js
('select', (data)=>{del.data = del.data)
})

什么时候触发呢, 当然是点击歌曲的时候触发.

$(this.view.el).on('click', 'li', (e)=>{let songId = Attribute('data-song-id')del.data.selectedSongID = del.data)let datalet songs = del.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事件it('select', object)
})

参考:
.html#hash632314851
.html#hash1025913543
.html#hash810954180
.html#hash787692837