Ember 1.9.1.beta and pouchDB

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pouchdb/3.2.0/pouchdb.min.js"></script>
<script src="https://rawgit.com/nolanlawson/relational-pouch/master/dist/pouchdb.relational-pouch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.0-beta.4/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.12/ember-data.min.js"></script>
<script src="https://rawgit.com/nolanlawson/ember-pouch/master/dist/globals/main.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class="newUserForm">
        <h3>Create New User</h3>
        {{user-creation createUser="createUser" employers=employers}}
    </div>
    <hr/>
    <ul>
    {{#each user in content}}
        <li>
            {{user-list-item  user=user}} {{log user}} {{log user.id}}
            <button {{action 'deleteUser' user.id}}>X</button>
        </li>
    {{/each}}
    </ul>
    <hr/>
    <button {{action "editWidget"}}>+</button>
</script>
<script type="text/x-handlebars" data-template-name="components/user-list-item">    
    <span>Username: {{user.userName}}</span>
    &nbsp; &nbsp;
    <span>First Name{{user.firstName}}</span>
    &nbsp; &nbsp;
    <span>Last Name{{user.lastName}}</span>
</script>
<script type="text/x-handlebars" data-template-name="components/user-creation">
    {{input value=userName placeholder="User Name"}}
    {{input value=firstName placeholder="First Name"}}
    {{input value=lastName placeholder="Last Name"}}
    {{view "select" content=employers_list
       optionValuePath="content.id"
       optionLabelPath="content.name"
        prompt="Employer"
       value=selected_employer
    }}
    <button {{action 'save'}} >Save</button>
</script>

<script type="text/x-handlebars"...

JavaScript

App = window.App = Em.Application.create();

/*
var db_1 = new PouchDB('mydb');
db_1.destroy();
db_2 = new PouchDB('mydb2');
db_2.destroy();
PouchDB.destroy('mydb', function(err, info) { });
PouchDB.destroy('mydb2', function(err, info) { });
*/

var db = new PouchDB('userdb');

App.ApplicationAdapter = EmberPouch.Adapter.extend({
    db: db//new PouchDB('userdb')
});

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    userName: DS.attr('string'),
    employer: DS.belongsTo('employer'),
    rev: DS.attr('string')
});

App.Employer = DS.Model.extend({
    name: DS.attr('string'),
    rev: DS.attr('string')
});

App.Widget = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
    date_added: DS.attr('date'),
    date_edited: DS.attr('date')
});


App.ApplicationRoute = Em.Route.extend({
    model: function() {
        /*
        var google = this.store.createRecord('employer', {name:'google'});
        google.save();
        var apple = this.store.createRecord('employer', {name:'apple'});
        apple.save();
        */
        return this.store.find('user');
    },
    
    setupController: function(controller, model) {
        controller.set('content', model);
        controller.set('employers', this.store.find('employer'));
    },
    actions: {
        createUser: function(userData){
            console.log("createUser called", userData);
            var user = this.store.createRecord('user', userData);
            user.save();
        },
        deleteUser: function(id){
            var that = this;
            this.store.find('user', id).then(function(user){
                console.log("going to destroy ", user);
                user.deleteRecord();
                console.log("confirm delete ", user.get('isDeleted'));
                user.save();
                var alls = that.store.all('user');
                console.log("alls ", alls);
               ...