एम्बरजेएस राउटर ऐप: दृश्य बनाम नियंत्रक

Question

मैं राउटर-आधारित एम्बरजेएस ऐप बना रहा हूं (दृढ़ता से excellent router guide पर मॉडलिंग किया गया है)। हालांकि, मैं एक नियंत्रक में एक दृश्य बनाम में क्या संबंधित है पर काफी उलझन में हूँ।

मुझे पूरी तरह से मिलता है कि {{action showFoo}} अक्सर राज्य परिवर्तन को इंगित करता है और राउटर मेरे ऐप के लिए राज्य मशीन है। लेकिन मेरे कुछ कार्य उस श्रेणी में नहीं आते हैं।

यहां मेरे वास्तविक कोड से एक उदाहरण दिया गया है (एचटीएमएल सरलीकृत लेकिन बरकरार बरकरार है)। मैं एक लॉगिन फॉर्म चाहता हूं जो AJAX के माध्यम से काम करता है (यानी एचटीएमएल फॉर्म सीधे सर्वर पर पोस्ट नहीं करता है, यह मेरे एम्बर ऐप को जेसन के माध्यम से लॉगिन करने का प्रयास करता है)।

<form> 
    Email Name: {{view Ember.TextField valueBinding="email"}} 
    Password: {{view Ember.TextField valueBinding="password"}} 
    <button type="submit" {{ action logIn target="this" }}>Sign in</button> 
</form> 

valueBindings मेरी loginController में फ़ील्ड्स हैं, लेकिन लॉग इन हैंडलर मेरे विचार में है (क्योंकि मैं समझ नहीं सकता कैसे नियंत्रक कॉल करने के लिए टेम्पलेट बताने के लिए)। मुझे लगता है कि यह एक अजीब वितरण & मुझे यकीन नहीं है कि इस पर एम्बर दृष्टिकोण सही है।

मुझे नहीं लगता कि राउटर को कार्रवाई को संभालना चाहिए क्योंकि लॉगिन प्रयास का अनुरोध वास्तव में एक राज्य परिवर्तन नहीं है। LoginController पर सही स्थान की तरह लगता है लॉगिन का प्रयास करें। लॉगिन प्रतिक्रिया प्राप्त होने के बाद वह नियंत्रक राज्य परिवर्तन को ट्रिगर कर सकता है।

Answer 1

मुझे नहीं लगता कि रूटर कार्रवाई से निपटने जाना चाहिए, क्योंकि एक लॉगिन प्रयास का अनुरोध वास्तव में एक स्थिति परिवर्तन नहीं है।

मुझे लगता है कि वास्तव में है मामला: लॉगिन प्रयास करते हुए एक authenticating राज्य है, जहां उदाहरण के लिए एक और क्लिक करने के लिए "लॉगिन" नजरअंदाज कर दिया है करने के लिए प्रारंभ कर देना चाहिए।

तो आईएमएचओ को राउटर द्वारा संभाला जाना चाहिए। मैं कुछ इस तरह के बारे में सोच रहा हूँ, http://jsfiddle.net/pangratz666/97Uyh/ देखें:

Handlebars:

<script type="text/x-handlebars" > 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="login" > 
    <p class="info">{{message}}</p> 
    Login to view the admin area <br/> 
    Email: {{view Ember.TextField valueBinding="email" }} <br/> 
    Password: {{view Ember.TextField valueBinding="password" }} <br/> 
    <button {{action login}} >Login</button> 
</script> 

<script type="text/x-handlebars" data-template-name="authenticating" > 
    Communicating with server ... 
</script> 

<script type="text/x-handlebars" data-template-name="admin" > 
    Hello admin! 
</script> 

जावास्क्रिप्ट:

App = Ember.Application.create(); 

App.ApplicationController = Ember.Controller.extend({ 
    login: function() { 
     // reset message 
     this.set('message', null); 

     // get data from login form 
     var loginProps = this.getProperties('email', 'password'); 

     // simulate communication with server 
     Ember.run.later(this, function() { 
      if (loginProps.password === 'admin') { 
       this.set('isAuthenticated', true); 
       this.get('target').send('isAuthenticated'); 
      } else { 
       this.set('message', 'Invalid username or password'); 
       this.set('isAuthenticated', false); 
       this.get('target').send('isNotAuthenticated'); 
      } 
     }, 1000); 

     // inform target that authentication is in progress   
     this.get('target').send('authenticationInProgress'); 
    }, 
    logout: function() { 
     this.set('isAuthenticated', false); 
    } 
}); 
App.ApplicationView = Ember.View.extend({ 
    templateName: 'application' 
}); 

App.LoginView = Ember.View.extend({ 
    templateName: 'login' 
}); 
App.AdminView = Ember.View.extend({ 
    templateName: 'admin' 
}); 
App.AuthenticatingView = Ember.View.extend({ 
    templateName: 'authenticating' 
}); 

App.Router = Ember.Router.extend({ 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/', 
      loggedOut: Ember.Route.extend({ 
       route: '/', 
       connectOutlets: function(router) { 
        router.get('applicationController').connectOutlet('login'); 
       }, 
       login: function(router) { 
        router.get('applicationController').login(); 
       }, 
       authenticationInProgress: function(router) { 
        router.transitionTo('authenticating'); 
       } 
      }), 
      authenticating: Ember.State.extend({ 
       enter: function(router) { 
        router.get('applicationController').connectOutlet('authenticating'); 
       }, 
       isAuthenticated: function(router) { 
        router.transitionTo('loggedIn'); 
       }, 
       isNotAuthenticated: function(router) { 
        router.transitionTo('loggedOut'); 
       } 
      }), 
      loggedIn: Ember.Route.extend({ 
       route: '/admin', 
       connectOutlets: function(router) { 
        if (!router.get('applicationController.isAuthenticated')) { 
         router.transitionTo('loggedOut'); 
        } 
        router.get('applicationController').connectOutlet('admin'); 
       }, 
       logout: function(router) { 
        router.get('applicationController').logout(); 
       } 
      }) 
     }) 
    }) 
});​ 

Answer 2

आप इसके लिए नियंत्रक का उपयोग कर सकते हैं, आपके उपयोग के टेम्पलेट में नियंत्रक तक पहुंच है। fiddle

तब के बाद लॉगिन हुआ है कि आप एक actioncall अपने रूटर करने के लिए कर सकते हैं, या उपयोगकर्ता लॉगिन कि विफल दिखाने:

<script type="text/x-handlebars" data-template-name="loginTemplate"> 
    {{#if controller.login}} 
    Logged in! 
    {{else}} 
    Login failed 
    {{/if}} 
</script> 

इस बेला एक छोटे से एप्लिकेशन है, जो करता है कि पता चलता है।

Answer 3

मैं सिर्फ यह के रूप में परिवर्तन के द्वारा किया जाता बना दिया है कोड:

{{ action logIn target="controller" }}