在 emberjs 中使用视图中的操作

Using action in view with emberjs

本文关键字：操作 视图 emberjs      更新时间：2023-09-26

当我点击提交或带有 emberjs 的按钮时，我将使用操作。

这是模板

<script type="text/x-handlebars" id="login">
  <form class="form-horizontal" id="loginForm"  >
    {{view App.Views.TextField id="username"}}
    {{view App.Views.TextField id="password"}}
    <input type="submit" value="Login" {{action login this}} />
  </form>
</script>

这是视图.js

App.Views.login = Ember.View.create({
  templateName: 'login',
  controllerBinding: 'App.Controllers.login',
  username: '',
  password: '',
  login: function(){
    alert("this is view.js");
  }
});

这是控制器.js

App.Controllers.login = Ember.Object.create({
  login: function(event){
    alert("This is controller.js");
  }
});

但是我看不到任何警报消息。我想看到两条消息。

短片

您尝试执行的操作应该使用更ember.js命名约定来完成一些不同的操作。有关工作示例，请参见此处。

长

您的模板，请注意，我已将App.Views.TextField更改为简单的input，这基本上是一个文本字段，Ember.TextField .我还添加了type="password"，使密码字段像一个。valueBinding 语句可确保在更改值时，控制器上的相同命名属性也会因数据绑定而更改。

<script type="text/x-handlebars" id="login">
  <form class="form-horizontal" id="loginForm"  >
    {{input id="username" valueBinding="username"}}
    {{input type="password" id="password" valueBinding="password"}}
    <button class="btn btn-success" {{action login}}>Login</button>
  </form>
</script>

通常，如果您有一个名为login余烬的模板，则会自动为您创建LoginView和LoginController。只有当你需要在控制器或视图中放置逻辑时，你才应该自己创建一个，所以余烬会使用它而不是创建一个。因此，由于您不应该将逻辑放在视图中，除了一些与渲染相关的东西之外，它也可以在您的情况下完全省略，因此 ember 将为您实例化一个基本视图。如果您想使用自己的视图，则应按以下方式定义它：

App.LoginView = Ember.View.extend();

这里唯一要考虑的重要一点是，如果您希望视图自动与特定模板一起使用，那么常规命名就是一切。例如，如果您有一个名为 myAwesomePanel ember 的模板.js则需要在 App 命名空间下有一个名为 MyAwesomePanelView 的视图。Ember.js 将查找App.MyAwesomePanelView，如果它找到与模板名称对应的模板名称，它将使用它并自动实例化它，因此调用 extend 而不是create .基本上约定如下： App.<YourCamelCasedTemplateName>View

您的控制器，这次我们创建一个，因为我们确实想要一些逻辑。请注意，对extend而不是create余烬的调用也会自动为您实例化它。

App.LoginController = Ember.ObjectController.extend({
  username: '',
  password: '',
  login: function(){
    alert("User: "+this.get('username')+" Pass: "+this.get('password'));
  }
});

希望这有帮助。

相关文章：