emberJS를 사용하여 로그인 양식을 만드는 방법은 무엇입니까?

Question

emberjs보기를 사용하여 로그인 양식을 만들고 싶습니다. 내가 이것을 통제 할 수있는 어떤 생각이라도 이것을 사용할 수 있습니다.

emberJS는 양식 컨트롤 및 그리드, 목록 에칭과 같은 다른 UI 컨트롤을 지원합니까? 나는 그것이 개발을위한 프레임 워크라는 것을 알고 있지만, 몇 가지 컨트롤을 지원한다. textField textArea 체크 박스.

그렇다면 패널과 같은 다른 컨트롤을 지원하지 않는 이유는 무엇입니까?

Answer 1

Davis가 올바르게 이해했지만 코드에 몇 가지 개선 사항이 있습니다.

1. Ember.Button은 더 이상 사용되지 않습니다. 대신 button 태그를 사용하십시오.
2. 보기에서 submit 이벤트를 정의하십시오. 양식 제출시 트리거됩니다. 버튼에 수동으로 액션을 설정할 필요가 없습니다.
3. 귀하의 의견은 $.ajax 건을 처리해서는 안됩니다. 컨트롤러에 위임하십시오.

그래서, 리팩토링 후, 코드는 다음과 같이 표시됩니다

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

App.loginController = Ember.Object.create({ 
    login: function(username, password) { 
     // $.ajax stuff goes here 
    } 
}); 

App.LoginFormView = Ember.View.extend({ 
    tagName: 'form', 
    username: null, 
    password: null, 

    submit: function(event) { 
     event.preventDefault(); 

     var username = this.get('username'); 
     var password = this.get('password'); 

     this.get('controller').login(username, password) 
    }, 
}); 

그리고 템플릿 :

<script type="text/x-handlebars" data-template-name="login"> 
    {{#view App.LoginFormView}} 
     <label> 
      Username: 
      {{view Ember.TextField valueBinding="view.username"}} 
     </label> 
     <label> 
      Password: 
      {{view Ember.TextField type="password" valueBinding="view.password"}} 
     </label> 
     <button>Login</button> 
    {{/view}} 
</script> 

편집 : 몇 가지 생각 후, 아마 모든 논리 I을 컨트롤러에 넣어 라우터에 실제로 가야합니다. 모델을 뷰에 연결하는 데 컨트롤러를 사용해야합니다.

Answer 2

어제 로그인 양식을 만들었습니다. 비동기식 로그인 양식을 만들고 싶습니다.

자바 스크립트 :

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

App.loginController = Ember.Object.create({ 
    // do login stuff 
}); 

App.LoginFormView = Ember.View.extend({ 
    username: null, 
    password: null, 

    submitLogin: function() { 
     var username = this.get('login'); 
     var password = this.get('password'); 
     console.log('Login: ' + login + ' Password: ' + password); 

     // do the login, probably by $.post()ing to your login page 
    }, 
}); 

핸들 바 :

<script type="text/x-handlebars" data-template-name="login"> 
    {{#view App.LoginFormView tagName="form"}} 
     <label>Username:</label> 
     {{view Ember.TextField valueBinding="view.username"}} 
     <label>Password:</label> 
     {{view Ember.TextField type="password" valueBinding="view.password"}} 
     {{#view Ember.Button target="parentView" action="submitLogin"}}Login{{/view}} 
    {{/view}} 
</script> 

나는이 gist보고 시작

는 API는 그래서 지금은 다른 조금 보이는 그러나 이후 조금 변경되었습니다

다른 질문에 대해서는 완전히 대답 할 수는 없지만 Ember.js의 핵심 철학은 대부분 원호라고 생각합니다. (그러나 Handlebars.js와 좋은 조화를 이루고 있습니다.) 아키텍처 프레임은 이고 UI 프레임 워크는 이전 모델 인 SproutCore과 다릅니다.