ember.js中的操作助手拋出一個錯誤

以下代碼失敗，並顯示消息「Uncaught TypeError：Object data-ember-action =」4「has no method'replace'」 - 似乎Handlebar助手獲得一個Handlebar缺少所述方法的SafeString。ember.js中的操作助手拋出一個錯誤

請注意，三重支撐動作{{{action ...}}}似乎有效。

<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>

來源

2012-07-31 Dave Edelhart

您正在使用什麼版本的餘燼？你可以把一個jsfiddle放在一起嗎？ – 2012-07-31 23:59:20

我已經複製/粘貼代碼，但jsffidle似乎無法執行它。昨天晚上改寫它已經太晚了。 – 2012-08-01 05:37:21

http://emberjs.com/community/指向你@ http://jsfiddle.net/kcjzw/，在那裏你可以找到一個EmberJS應用程序的JSFiddle模板。 – 2012-08-01 10:20:40

這裏是你的代碼的工作版本：http://jsfiddle.net/Sly7/2F2y9/ 我清理一些奇怪的代碼（事實上，怪異對我來說，尤其是_.map（），或_.extend（）），刪除不必要的看法，尊重Ember Naming Conventions。

但在某些方面，它對我來說並不完全乾淨。

<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>

來源

2012-08-01 10:27:55

ember.js中的操作助手拋出一個錯誤

回答

相關問題