action helper in ember.js throwing an error

Question

The following code fails with the message "Uncaught TypeError: Object data-ember-action="4" has no method 'replace' " -- seems that the Handlebar helper gets a Handlebar SafeString which lacks said method.

note that triple bracing action {{{action ...}}} seems to work.

    <h1>Skills</h1>

    <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 type="text/x-handlebars" >
        {{view SKILLS.skills_view}}
    </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();
                }
            });

        })
    </script>

Answer 1

Here is a working version of your code: http://jsfiddle.net/Sly7/2F2y9/ I have clean up some weird code (in fact, weird for me, especially the _.map(), or _.extend()), removing unecessary view, respect Ember Naming Conventions.

But in some way, it is not totally clean for me.

<h1>Skills</h1>

<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>
          {{#each Skills.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 }}
        </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 type="text/x-handlebars" >
    {{view Skills.SkillsView}}
</script>

<script language="javascript">

    var SKILLS;

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

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

            skills: [],

            add_skill: function(){
                console.log("adding a new skill");
            }

        });

        Skills.skills = [
            {name:"throwing", basis:"speed", type: 'skill', id:0},
            {name:"spech", basis:"will", type: 'skill', id:1}
        ].map(function(s){ return Skills.Skill.create(s); });

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

    })
</script>

​