歌单的实现

思路：
添加歌曲到专辑中
先通过一个form表单来添加歌单的信息，当提交信息后创建一个playlist的数据库，然后带上这个playlist的id作为查询参数跳转到一个添加歌曲的页面，在添加歌曲页面中，首先先把数据库的所有歌都获取一遍，然后当点击一首歌前通过当前这首歌的获取这首歌的所有信息，判断它里面的dependent.id是否等于你的playlist里的id，如果等于说明这首歌已经是当前专辑的了，就什么也不做，否则就给这首歌曲添加一个set('dependent',playlist)，这里的playlist需要你通过查询参数里的id重新获取一下，而给当前的歌曲填加set则是调用更新对象的api，只要选中了这首歌曲，就会在右侧添加一个li显示，这也就实现了我们添加歌曲到指定专辑的功能
获取当前专辑的歌曲
通过关联数据一对多的查询api，利用playlist的数据库名和id就可以拿到它下面所有的歌曲，然后每次页面初始化的时候都先获取一下
在专辑里删除歌曲的实现
歌曲之所以能在对应的专辑里，主要是因为dependent，也就是只要将我们对应歌曲的dependent设为null就可以了，当点击删除时，首先获取当前歌曲的id，然后利用更新api让dependent为null，之后remove当前li，然后重新通过当前playlist的id获取一下它下面的歌曲

1.使用一个form表单实现对歌单信息的添加

当点击按钮时，创建一个playlist的数据库，里面存的内容就是你提交的对应的内容，然后直接跳转到需要添加到添加歌曲的一个页面对当前歌单添加歌曲

• admin-playlist.html

<div class="playlistform-wrapper">
    <h1>创建歌单</h1>
    <form class="playlistForm">
        <div class="row">
            <label for="">歌单名<input type="text" name="name"></label>
        </div>
        <div class="row">
            <label>封面<input type="text" name="cover"></label>
        </div>
        <div class="row">
           <label for="">简介<textarea name="summary" cols="30" rows="10"></textarea></label>
        </div>
        <div class="row">
            <button type="submit">提交</button>
        </div>
    </form>
</div>
{
    let view = {
        el: '.playlistform-wrapper',
        $form: null,
        init(){
            this.$el = $(this.el)
            this.$form = this.$el.find('.playlistForm')
        }
    }
    let model = {
        create(data){
            var playlist = new AV.Object('Playlist')
            for(let key in data){
                playlist.set(key,data[key])
            }
            playlist.save().then((newplaylist)=>{
                let {id} = newplaylist
                window.location.href=`admin-addplaylist.html?id=${id}`
            })
        }
    }
    let controller = {
        init(view, model){
            this.view = view
            this.model = model
            this.view.init()
            this.bindEvent()
        },
        bindEvent(){
            this.view.$form.on('click','button',(e)=>{
                e.preventDefault()
                let keys = ['name','summary','cover']
                let data = {}
                keys.map(name=>{
                        data[name] = this.view.$form.find(`[name=${name}]`).val()
                })
                this.model.create(data)
            })
        }
    }
    controller.init(view, model)
}

跳转到的添加歌曲页面的实现

• admin-addplaylist.html

<div class="wrapper">
        <div class="addplaylist-wrapper">
            <h1>添加歌曲</h1>
            <form class="addplaylist">
                <div class="row">
                    <button type="submit">提交</button>
                </div>
            </form>
        </div>
        <div class="right">
            
        </div>
</div>
<script src="./js/admin-addplaylist/alllist.js"></script>
<script src="./js/admin-addplaylist/checklist.js"></script>

• alllist.js

{
    let view = {
        el: '.addplaylist-wrapper',
        init(){
            this.$el = $(this.el)
        },
        render(data){
            let {songs} = data
            songs.map(song=>{
                let line = $(`
                <div class="row">
                    <label><input type="checkbox" data-song-id="${song.id}"><span>${song.name}</span></label>
                </div>
                `)
                this.$el.find('.addplaylist').prepend(line)
            })
        }
    }
    let model = {
        playlist: '',
        data: {
            songs: [],
            playlistSongs: []
        },
        find(){
            var query = new AV.Query('Song')
            return query.find().then((songs)=>{
                this.data.songs = songs.map((song)=>{
                    return {id:song.id,...song.attributes}
                })
                return this.data.songs
            })
        },
        getSong(id){
            var song = new AV.Query('Song');
            return song.get(id)
        },
        getPlaylist(){
            let search = window.location.search.substring(1)
            let key = search.split('=')
            let id = key[1]
            this.playlist = AV.Object.createWithoutData('playList', id) 
        },
        updata(songId){
            var song = AV.Object.createWithoutData('Song', songId);
            // 修改属性
            song.set('id',songId)
            song.set('dependent', this.playlist);
            // 保存到云端
            return song.save().then(data=>{
                this.data.playlistSongs.push(data)
            })
        }
    }
    let controller = {
        init(view, model){
            this.view = view
            this.view.init()
            this.model = model
            this.model.getPlaylist()
            this.model.find().then(songs=>{
                Object.assign(this.model.data.songs,songs)
                this.view.render(this.model.data)
                window.eventHub.emit('contact',this.model.playlist)
            })
            this.bindEvent()
        },
        bindEvent(){
            let songsId = []
            this.view.$el.on('click','input',(e)=>{
                let current = $(e.currentTarget)
                let currentId = current.attr('data-song-id')
                this.model.getSong(currentId).then(data=>{
                    let dependent = data.attributes.dependent
                    if(dependent && dependent.id === this.model.playlist.id){
                        return
                    }else {
                        if(current.prop('checked') === true){
                            songsId.push(currentId)
                        }else{
                            songsId.pop(currentId)
                        }
                    }
                }) 
            })
            this.view.$el.on('submit','.addplaylist',(e)=>{
                e.preventDefault()
                let promise = []
                songsId.map(songId=>{
                    promise.push(this.model.updata(songId))
                })
                Promise.all(promise).then(()=>{
                    let playlist = this.model.data.playlistSongs
                    window.eventHub.emit('select',playlist)
                    songsId = []
                    this.model.data.playlistSongs = []
                })
                this.view.$el.find('.addplaylist > .row > label> input').prop('checked',false)
            })
        }
    }
    controller.init(view, model)
}

• checklist.js

{
    let view = {
        el: '.right',
        template: `
            <ul class="checklist-wrapper">
            </ul>
        `,
        render(data = {}){
            this.$el.html(this.template)
            if(data.songs){
                let {songs} = data
                songs.map(song=>{
                    let $li = $(`<li>${song.name}</li>`).attr('data-song-id',song.id)
                    $li.append('<span>x</span>')
                    this.$el.find('.checklist-wrapper').append($li)
                })
            } 
        },
        init(){
            this.$el = $(this.el)
        }
    }
    let model = {
        playlist: null,
        data: {
            songs: []
        },
        getSong(songs){
            let promises = []
            songs.map(song=>{
                let {id} = song
                var song = new AV.Query('Song')
                promises.push(
                    song.get(id).then(songInfo=>{
                        this.data.songs.push(songInfo.attributes)
                    })
                )
            })
            return Promise.all(promises)  
        },
        playlistSongs(playlist){
            var song = new AV.Query('Song')
            song.equalTo('dependent', playlist)
            return song.find().then((songs)=>{
                songs.map(song=>{
                    this.data.songs.push(song.attributes)
                })
                return this.data
            })
        },
        deleteSong(songId){
            var song = AV.Object.createWithoutData('Song', songId);
            // 修改属性
            song.set('id',songId)
            song.set('dependent', null);
            // 保存到云端
            return song.save()
        }
    }
    let controller = {
        init(view, model){
            this.view = view
            this.view.init()
            this.model = model
            this.bindEvent()
            this.bindEventHub()
        },
        bindEvent(){
            this.view.$el.on('click','li>span',(e)=>{
                let $li = $(e.currentTarget).parent()
                let songId = $li.attr('data-song-id')
                this.model.deleteSong(songId).then((data)=>{
                    this.model.data.songs.map((song,index)=>{
                        if(song.id === songId){
                            this.model.data.songs.splice(index,1)
                        }
                    })
                    $li.remove()   
                })
            })
        },
        bindEventHub(){
            window.eventHub.on('select',(song)=>{
                this.model.getSong(song).then((data)=>{
                    this.view.render(this.model.data)
                    // localStorage.setItem('playlist',JSON.stringify(this.model.data))
                })
            })
            window.eventHub.on('contact',(playlist)=>{
                this.model.playlist = playlist
                this.model.playlistSongs(playlist).then(songs=>{
                    this.view.render(songs)
                })
            })
        }
    }
    controller.init(view, model)
}