修改歌曲

将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事件, 所以也将触发事件写入.

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事件也用于两件事. 或者说两个逻辑.

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