我正在尝试创建一个非常简单的东西-登录。
这是我的模板:
<script type="text/x-handlebars" data-template-name="login">
<div class="row well">
<form class="form-inline">
{{input value=email type="text" placeholder="Email?"}}
{{input value=password type="password" placeholder="Password?"}}
{{#view App.LoginView}}
<button id="login-button" type="submit" class="btn">Sign in</button>
{{/view}}
</form>
{{#if not_logged}}
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{{/if}}
</div>
</script>
风景:
App.LoginView = Ember.View.extend(
{
tagName: "span",
click: function()
{
this.$("#login-button").button("loading");
this.get("controller").send("do_login");
}
});
控制器:
App.LoginController = Ember.Controller.extend(
{
is_logged: true,
do_login: function()
{
/** some ajax comes here **/
}
});
因此,用户单击该按钮,然后我将其状态更改为“正在加载”。问题是如果登录失败,我该如何向视图发出信号,以便执行此操作。$(“#login-button”)。button(“ reset”); ?
最佳答案
我已经完成了将boostrap按钮包装在所有者组件中并使用绑定的操作。我认为这不是使用jquery查找按钮的方式,而是余烬方式。
控制器:
App.LoginController = Ember.ObjectController.extend({
not_logged: false,
email: '[email protected]',
password: 'ember',
isLoading: false,
doLogin: function() {
this.set('isLoading', true);
// simulates some ajax
Ember.run.later(this, function() {
if (this.get('email') == '[email protected]' && this.get('password') == 'ember') {
this.set('not_logged', false);
// transition to other route etc
} else {
this.set('not_logged', true);
}
this.set('isLoading', false);
}, 1000);
}
});
自定义按钮组件:
App.BoostrapButton = Ember.View.extend({
tagName: 'button',
attributeBinding: ['type'],
type: 'submit',
classNames: ['btn'],
isLoading: true,
isLoadingChanged: function() {
debugger;
if (this.get('isLoading')) {
this.$().button('loading');
} else {
this.$().button('reset');
}
}.observes('isLoading')
})
这个jsfiddle
看看this jsfiddle
奖金
here是一段emercast,显示如何进行登录。
关于javascript - 根据 Controller 的结果处理 View 中的内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18087580/