Skills view in ember

skills.html

<h1>Skills</h1>

<div id="skills">

</div>
<script type="text/x-handlebars" data-template-name="skill-list">
    <table class="datagrid" style="width: 100%">
        <thead>
        <tr>
            <td colspan="5" class="controls">
                Search <input type="text" value="" class="search_field"/>
            </td>
        </tr>
        <tr>
            <th class="id_sort">ID</th>
            <th class="name_sort">Name</th>
            <th class="basis_sort">Basis</th>
            <th class="type_sort">Type </th>
            <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        {{#view SKILLS.skill_items }}

        {{#each skills }}
        <tr>
            <td>
                {{ _id }}
            </td>
            <td>{{ name }}</td>
            <td>{{ basis }}</td>
            <td>{{ type }}</td>
            <td class="control">
                <button class="edit"><span class="icon"></span> Edit</button>
            </td>
        </tr>
        {{/each }}

        {{/view }}
        </tbody>
        <tfoot>
        <tr>
            <th class="id_sort">ID</th>
            <th class="name_sort">Name</th>
            <th class="basis_sort">Basis</th>
            <th class="type_sort">Type </th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td colspan="5" class="controls">

                <button class="add" {{action "add_skill"}} >Add Skill
                </button>
            </td>
        </tr>
        </tfoot>
    </table>
</script>

<script language="javascript">

    var SKILLS;

    $(function () {
        SKILLS = Ember.Application.create({

            Skill: Ember.Object.extend({
                id: 0,
                name: '',
                basis: ''
            }),

            skills: [],

            add_skill: function(){

            }

        });

        SKILLS.skills = _.map([
            {name:"throwing", basis:"speed", type: 'skill', _id:0},
            {name:"spech", basis:"will", type: 'skill', _id:1}
        ], function(s){ return _.extend(new SKILLS.Skill(), s)});

        SKILLS.skill_items = Ember.View.extend({
            skillsBinding: 'SKILLS.skills'
        });

        SKILLS.skills_view = Ember.View.extend({
            templateName:'skill-list',
            add_skill: function(){
                SKILLS.add_skill();
            }
        });

         SKILLS.skills_view.create().appendTo('#skills');

    })
</script>