2012-05-29 18 views
8

के साथ वेब अनुप्रयोग बनाना मुझे अभी Ember.js के बारे में पता चला है, और यह दिलचस्प लग रहा है। मैं इसका उपयोग कैसे करना सीखने के लिए एक छोटा नोट ऐप बनाना चाहता हूं।Ember.js

मेरे मन में मूलभूत लेआउट श्रेणियों के लिए है, और प्रत्येक श्रेणी में नोट्स हो सकते हैं। यूआई के लिए, श्रेणियों के साथ एक साइडबार होगा जो क्लिक करने योग्य होगा, और श्रेणी के लिए नोट दूसरी तरफ प्रदर्शित होंगे।

लेकिन मैं पूरी टेम्पलेट/लेआउट सिस्टम को काफी समझ नहीं सकता। टेम्पलेट सिस्टम स्वयं काफी सरल लगता है (रेल दृश्यों के लिए पर्याप्त है)। लेकिन लेआउट के लिए आप क्या करते हैं? उदाहरण के लिए रेल के साथ, आप लेआउट को आसानी से परिभाषित कर सकते हैं और फिर उसमें व्यक्तिगत विचार जोड़े जाते हैं। यह एम्बर.जेएस के साथ मुझे अस्पष्ट लगता है।

उत्तर

1

सरल रैपर-स्टाइल लेआउट के लिए आप एम्बर के अंतर्निर्मित layout support का उपयोग कर सकते हैं। यह केवल एक {{yield}} का समर्थन करता है, इसलिए आपके आवेदन के लिए बहुत सीमित हो सकता है।

कुछ और अधिक मजबूत के लिए गमप्टन के Ember Layout पर एक नज़र डालें। मुझे लगता है कि आपको रेल लेआउट के समान ही मिल जाएगा। उसके पास live example here है।

अंत में, एम्बर (दृश्यों के बजाय या लेआउट के अलावा) में दृश्यों का पदानुक्रम बनाना काफी आसान है। टॉम डेल के पास एम्बर संसाधनों और उदाहरणों का एक अच्छा संग्रह है here

9
दृष्टिकोण उल्लेख @rharper, आप भी outlet सहायक का उपयोग कर सकते इसके अलावा

, जिसमें प्रतिबद्ध 5a4917b शुरू किया गया है।

Handlebars:

<script type="text/x-handlebars" data-template-name="main" > 
    Main View 
    {{outlet contentView}} 
    {{outlet footerView}} 
</script> 

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

आप एक उदाहरण here पा सकते हैं

App.viewController = Ember.Object.create({ 
    footerView: Ember.View.create({ 
     templateName: 'footer' 
    }), 
    contentView: Ember.View.create({ 
     templateName: 'content' 
    }) 
}); 

Ember.View.create({ 
    controllerBinding: 'App.viewController', 
    templateName: 'main' 
}).append(); 

Ember.run.later(function(){ 
    App.viewController.set('contentView', Ember.View.create({ 
     templateName: 'new-content' 
    })); 
}, 1000); 

+0

इस उदाहरण में कर सकते हैं outl और सामग्री देखें अन्य आउटलेट से बना है? उदाहरण के लिए, विभिन्न सामग्री अनुप्रयोग के विभिन्न वर्गों (या राज्यों) के लिए देखें: सामग्री दृश्य 1: {{आउटलेट बाएं}} {{आउटलेट दाएं}} और सामग्री दृश्य 2: {{आउटलेट सूची}} {{आउटलेट विवरण}}। – jrabary

+0

अद्यतन एपीआई दस्तावेज़ भी उपयोगी हैं http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_outlet – mspisars