Question

没有处理以下代码的操作错误。如何解决这个问题？

我使用ember为我的示例应用创建了一个视图，一个对象。但是行动部分不起作用。

如何将动作绑定到视图？

HTML：

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>

<script type="text/x-handlebars">
  <ul class="mod-choosable-list">    
    {{view Ember.CollectionView 
      contentBinding="App.teachersController"
      itemViewClass="App.TeacherView"
      tagName="div"
    }}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="teacher-view">
  <div {{action 'refresh'}}><b>{{view.content.name}}</b></div>
</script>




  <script src="js/libs/jquery-v1.11.1.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-v1.6.1.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

JS：

App = Ember.Application.create({});

App.Teacher = Ember.ObjectController.extend({
    id: null, 
    name: null, 
    students: null,
    actions: {
        refresh: function(){
          alert("refresh");
        }
      }
});


App.TeacherView = Ember.View.extend({
    templateName: 'teacher-view'
});



App.set('teachersController', Ember.ArrayController.create({
    content: [
        App.Teacher.create({id:1, name: "mr.katz", students: [2, 3]}),
        App.Teacher.create({id:2, name: "mr.dale", students: [1]})
        ]
}));

Answer 1

当您触发操作refresh时，ember将在控制器中查找操作。由于您尚未为视图指定控制器，因此将使用应用程序模板的控制器App.ApplicationController。

您可以使用以下代码触发您的操作。

App.ApplicationController = Em.Controller.extend({
  actions: {
    refresh: function(){
      alert("refresh");
    }
  }
});

您也可以在视图中指定操作。在这种情况下，您需要指定操作的目标。这将告诉ember在哪里寻找动作处理程序。

App.TeacherView = Ember.View.extend({
  templateName: 'teacher-view',
  actions: {
    refresh: function(){
      alert("refresh");
    }
  }
});

<div {{action 'refresh' target="view"}}><b>{{view.content.name}}</b></div>

您可以在init事件中指定控制器以进行查看。

App.TeacherView = Ember.View.extend({
  templateName: 'teacher-view',
  setup:function() {
    this.set('controller', App.Teacher.create());
  }.on('init')
});

灰烬 - 没有任何处理动作发生

1 个答案: