ember.js - नया मॉडल

Question

बनाने के लिए सही नियंत्रक/दृश्य पैटर्न क्या है मेरे पास एक ऐप है जिसमें इस समय एक ही मॉडल की वस्तुओं का दृश्य शामिल है। वे सर्वर से प्राप्त कर रहे हैं, के माध्यम से लूप में चलाया और एक ऐड विधि

<script> 
App.Controllers.List = Em.ArrayProxy.create({ 
    content: Ember.A([]), 
    add: function(obj){ 
    this.pushObject(obj); 
    } 
}); 
</script> 

अब मैं एक हिस्सा है जहाँ उपयोगकर्ता एक नया उद्देश्य यह है कि (सत्यापन पास करने के बाद) में जोड़ दिया जाएगा बनाता है पर काम कर रहा हूँ का उपयोग कर सूची नियंत्रक को जोड़ा गया सूची और सर्वर को भी भेजा गया।

मुझे इनपुट फॉर्म के माध्यम से एक नई वस्तु बनाने के लिए सबसे अच्छा पटर पर कोई उदाहरण नहीं मिल रहा है। मैं कुछ विकल्प देख सकता हूं, और कुछ अर्ध-कार्यान्वित किया है लेकिन कुछ भी सही नहीं लगता है।

• उपयुक्त रूप तत्वों के साथ एक दृश्य और() मॉडल .Get का उपयोग कर प्रपत्र तत्वों से लिया गया विभिन्न गुणों का उपयोग कर
• कि करने के लिए दृश्य की सामग्री और बाँध प्रपत्र तत्वों में एक मॉडल बनाएं instantiating के लिए एक विधि बनाएँ।/नियंत्रक सरणी में जोड़ने से सर्वर
• को बचत एक मॉडल बनाने के लिए, नियंत्रक सरणी में जोड़ने और मैं तरह की कार्यक्षमता मैं बाहर लड़ सकता संपादन

के लिए इसे खोलने के लिए दृश्य पर एक विधि को शामिल करें चाहते हैं, लेकिन मैं यह सुनिश्चित करना पसंद करूंगा कि मुझे सर्वोत्तम अभ्यास के बारे में पता है।

मैं वर्तमान में कुछ इस तरह

<script> 
App.Views.ItemCreate = Em.View.extend({ 
    content: App.Models.Item.create({}), 
    templateName: 'create', 
    createButton: function(){ 

    var itemObj = this.get('content'); 
    var item = {}; 
    item.title = this.get('content').get('title'); 

    $.ajax({ 
     type: 'POST', 
     url: '/test/data.json', 
     data: item, 
     dataType: 'json', 
     success: function(responseData, textStatus, jqXHR) { 
     App.Controllers.List.add(itemObj); 
     } 
    }); 
    } 
}); 
</script> 

<script type="text/x-handlebars" data-template-name="create"> 
    {{view Em.TextField id="create-title" valueBinding="content.title"}} 
    <a href="#" {{action "createButton" }}>Create</a> 
</script> 

किसी भी मदद की बहुत सराहना

नोट

मैं करने के लिए सही जवाब बदल दिया है (जो मेरी सूची में दूसरा बुलेट है) pangratz की। हालांकि अन्य प्रतिक्रियाओं ने सीधे मेरे प्रश्न का उत्तर दिया, मुझे विश्वास है कि जो लोग इसे Google के माध्यम से पाते हैं उन्हें जवाब देना चाहिए, न केवल यह अच्छा एमवीसी है, बल्कि यह अधिक अच्छा एमवीसी है, लेकिन यह अधिक एम्बर-वाई है: ओ)

Answer 1

सर्वर के साथ संचार करना निश्चित रूप से ऐसा कुछ है जो दृश्य में नहीं किया जाना चाहिए। यह कुछ नियंत्रक के लिए है। आवेदन के विभिन्न हिस्सों को और अलग करने के लिए, मैं DataSource को लागू करने पर भी विचार करता हूं जो AJAX अनुरोधों को संभालता है। यह विभाजन आपके एप्लिकेशन को अधिक टेस्टेबल बनाता है और प्रत्येक घटक पुन: प्रयोज्य बनाता है। दृश्य, नियंत्रक और डेटा स्रोत के ठोस कनेक्शन तब बाइंडिंग के माध्यम से महसूस किए जाते हैं।

• दृश्य आपके संपादित रूप है, जो 'मूल्यों एक नियंत्रक
• दृश्य एक कार्रवाई है जो नियंत्रक बताता है को बचाने के लिए बचाने के हैंडल करने के लिए बाध्य कर रहे हैं पता चलता है:

  अपने मामले के लिए कार्यप्रवाह निम्नलिखित हो सकता है निर्मित ऑब्जेक्ट

• नियंत्रक प्रतिनिधियों डेटा स्रोत के लिए बचत जो तब अंत में AJAX अनुरोध शुरू होता है
• जब वस्तु सहेज लिया गया है नियंत्रक अधिसूचित किया गया है

तुम भी ember-data जिसमें क्लाइंट साइड डेटा भंडारण है और आप के लिए सब बॉयलरप्लेट हैंडल पर गौर करना चाहिए। इसके अलावा The architecture of Ember.js apps - data पर एक नज़र और EmberJS: Good separation of concerns for Models, Stores, Controllers, Views in a rather complex application?

---

है दृश्य:

App.View.ItemCreate = Ember.View.extend({ 
    templateName: 'create', 
    createObject: function(evt) { 
    var object = this.get('content'); 
    var controller = this.get('controller'); 
    controller.createObject(object); 
    } 
}); 

नियंत्रक:

App.Controllers.List = Ember.ArrayProxy.extend({ 
    content: [], 
    createObject: function(hash) { 
    var dataSource = this.get('dataSource'); 
    dataSource.createObject(hash, this, this.createdObject); 
    }, 
    createdObject: function(object) { 
    this.pushObject(object); 
    } 
}); 

डेटा स्रोत:

App.DataSource = Ember.Object.extend({ 
    createObject: function(hash, target, callback) { 
    Ember.$.ajax({ 
     success: function(data) { 
     callback.apply(target, data); 
     } 
    }); 
    } 
}); 

गोंद सब कुछ एक साथ :

App.dataSource = App.DataSource.create(); 
App.listController = App.Controllers.List.create({ 
    dataSourceBinding: 'App.dataSource' 
}); 

App.View.ItemCreate.create({ 
    controllerBinding: 'App.listController' 
}).append(); 

Answer 2

यदि आप चाहते हैं सख्त एमवीसी मॉडल का पालन करें, फिर मॉडल को दृश्य पर नहीं बल्कि नियंत्रक पर बनाया जाना चाहिए। एम्बर अभी भी बहुत छोटा है और अभी भी कोई परिभाषित पैटर्न नहीं है, मैं क्या करूँगा आपके मॉडल को दृश्य की सामग्री के रूप में सेट किया गया है (जैसा कि आपने पहले ही किया है) सभी इनपुट विशेषताओं से जुड़े सभी इनपुट के साथ। फिर जब बटन धक्का दिया है:

createButton: function(){ 
    App.Controllers.List.create(this.get('content')); 
} 

नियंत्रक पर:

create: function(model) { 
    if model.valid() { //validates the model 
    model.save({ 
     onSuccess: function(response) { // callback 
     var item = App.Models.Item.create(response.item) 
     App.controllers.List.add(item) 
     } 
    }) 
    } 

और अंत में मॉडल:

save: function(options) { 
    $.ajax({ 
    type: 'POST', 
    url: '/test/data.json', 
    data: item, 
    dataType: 'json', 
    success: options.onsuccess 
    }); 
} 

इस तरह अन्य js चौखटे आप काम करने की उम्मीद है। यह थोड़ा और वर्बोज़ और जटिल लगता है, लेकिन यह चीजों को