कंट्रोलर

Question

में विशेषता के लिए मूल्य प्रपत्र इनपुट को बाध्य करने के लिए कैसे चुनें I नियंत्रक में "चयनित वैल्यू" विशेषता के लिए इनपुट चयन से मूल्य को बाध्य करने का प्रयास करें।

यह app.js

Food = Ember.Application.create(); 

Food.appsController = Ember.Object.create({ 
    selectedValue: "" 
}); 

Food.Todo = Ember.Object.extend({ 
    title: null, 
    value: null 
}); 

Food.FoodController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

Food.FoodController.pushObject(Food.Todo.create({title:"a", value:"1"})); 
Food.FoodController.pushObject(Food.Todo.create({title:"b", value:"2"})); 
Food.FoodController.pushObject(Food.Todo.create({title:"c", value:"3"})); 

यह index.html इस

<select id="ember180" class="ember-view"> 
    <option id="ember192" class="ember-view"> 
    <script id="metamorph-0-start" type="text/x-placeholder"></script> 
    a 
    <script id="metamorph-0-end" type="text/x-placeholder"></script> 
    </option> 
    <option id="ember196" class="ember-view"> 
    <script id="metamorph-1-start" type="text/x-placeholder"></script> 
    b 
    <script id="metamorph-1-end" type="text/x-placeholder"></script> 
    </option> 
    <option id="ember200" class="ember-view"> 
    <script id="metamorph-2-start" type="text/x-placeholder"></script> 
    c 
    <script id="metamorph-2-end" type="text/x-placeholder"></script> 
    </option> 
</select> 

मुझे पता नहीं है कि कैसे विकल्प के लिए मूल्य जोड़ने के लिए और इस तरह

{{#collection 
    contentBinding="Todos.todosController" 
    tagName="select" 
    itemClassBinding="content.isDone"}} 
    {{content.title}} 
{{/collection}} 

आउटपुट नज़र है चयनित मूल्य को नियंत्रक को वापस बाध्य करने के लिए कैसे। क्या एम्बरज में ऐसा करना संभव है?

Answer 1

एम्बर अब एक अंतर्निहित चयन दृश्य है।

आप इसे नवीनतम एम्बर में पा सकते हैं।js यहाँ का निर्माण:

var App = Ember.Application.create(); 

App.Person = Ember.Object.extend({ 
    id: null, 
    firstName: null, 
    lastName: null, 

    fullName: function() { 
     return this.get('firstName') + " " + this.get('lastName'); 
    }.property('firstName', 'lastName').cacheable() 
}); 

App.selectedPersonController = Ember.Object.create({ 
    person: null 
}); 

App.peopleController = Ember.ArrayController.create({ 
    content: [ 
     App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}), 
     App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}), 
     App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}), 
     App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'}) 
    ] 
}); 

आपका टेम्पलेट दिखाई देगा:: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

यहाँ एक उदाहरण उपयोग है http://jsfiddle.net/ebryn/zgLCr/

Answer 2

एक कस्टम Ember.View मेरे लिए काम करता का उपयोग करना है, लेकिन मुझे लगता है कि एक बेहतर समाधान है ...

देखें उदाहरण के काम कर रहे इस बेला http://jsfiddle.net/pangratz/hcxrJ/

Handlebars है:

{{#view Food.SelectView contentBinding="Food.foodController" 
    valueBinding="Food.appsController.selectedValue"}} 
    <select> 
     {{#each content}} 
      <option {{bindAttr value="value"}} >{{title}}</option> 
     {{/each}} 
    </select> 
{{/view}} 

एप्लिकेशन .js:

Food = Ember.Application.create(); 

Food.SelectView = Ember.View.extend({ 
    value: null, 

    valueChanged: function(){ 
     this.$('select').val(this.get('value')); 
    }.observes('value'), 

    didInsertElement: function(){ 
     var self = this; 
     this.$('select').change(function(){ 
      var val = $('select option:selected').val(); 
      self.set('value', val); 
     }); 
    } 
}); 

Food.appsController = Ember.Object.create({ 
    selectedValue: "" 
}); 

Food.Todo = Ember.Object.extend({ 
    title: null, 
    value: null 
}); 

Food.foodController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

Food.foodController.pushObject(Food.Todo.create({title:"a", value:"1"})); 
Food.foodController.pushObject(Food.Todo.create({title:"b", value:"2"})); 
Food.foodController.pushObject(Food.Todo.create({title:"c", value:"3"})); 

Answer 3

@pangrantz के समाधान से कूदते हुए, यह फिड ले उदाहरण (http://jsfiddle.net/bsyjr/) कुछ सुधारों को दिखाता है: हैंडलबार्स कोड टैग नाम के उपयोग के माध्यम से क्लीनर है। जब टैगनाम "चयन" पर सेट होता है, तो बच्चे के विचार स्वचालित रूप से "विकल्प" तत्व बन जाते हैं। क्यों समझने के लिए https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js में Ember.CollectionView.CONTAINER_MAP देखें। जावास्क्रिप्ट पक्ष पर, आइटम ViewClass निर्दिष्ट करके, हम विकल्प तत्व में मान विशेषता जोड़ सकते हैं।

<script type="text/x-handlebars" > 
    {{#collection Food.SelectView tagName="select" contentBinding="Food.foodController" 
     valueBinding="Food.appsController.selectedValue"}} 
     {{content.title}} 
    {{/collection}} 

    selected: {{view Ember.TextField valueBinding="Food.appsController.selectedValue"}}{{Food.appsController.selectedValue}} 
</script> 

Food = Ember.Application.create(); 

Food.SelectView = Ember.CollectionView.extend({ 
    value: null, 
    itemViewClass: SC.View.extend({ 
     attributeBindings:['value'], 
     valueBinding: 'content.value' 
    }), 

    valueChanged: function(){ 
     this.$().val(this.get('value')); 
    }.observes('value'), 

    didInsertElement: function(){ 
     var self = this; 
     this.$().change(function(){ 
      var val = $('select option:selected').val(); 
      self.set('value', val); 
     }); 
    } 
}); 

Food.appsController = Ember.Object.create({ 
    selectedValue: "" 
}); 

Food.Todo = Ember.Object.extend({ 
    title: null, 
    value: null 
}); 

Food.foodController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

Food.foodController.pushObject(Food.Todo.create({title:"a", value:"1"})); 
Food.foodController.pushObject(Food.Todo.create({title:"b", value:"2"})); 
Food.foodController.pushObject(Food.Todo.create({title:"c", value:"3"})); 

अभी भी है घटना से निपटने, जो एंबर की घटना ढांचे का उपयोग नहीं कर रहा है में सुधार की गुंजाइश है, और यह भावना का एक बहुत एक कस्टम लिखा SelectView कि Handlebars का लाभ उठाने नहीं करता है, IMO के बाद से उपयोग करने के लिए होगा, यह संदिग्ध है कि इस मामले में हैंडलबार कितना मूल्य जोड़ता है।

Answer 4

मुझे यकीन है कि अगर यह दूसरों के लिए उपयोग की है नहीं कर रहा हूँ, लेकिन मैं यहाँ उत्तर के आधार पर कुछ इसी तरह कर रहा हूँ, और इस SelectView कि इस संदर्भ में भी काम करना चाहिए बना दिया है। यह 'परिवर्तन' से जुड़ा हुआ है, वर्तमान में चयनित दृश्य को बाहर करता है और फिर इसकी सामग्री के साथ कुछ करता है।

Food.SelectView = Ember.CollectionView.extend({ 
    change: function(e) { 
    var selected = this.$().find(":selected").index(); 
    var content = this.get('childViews')[selected].content; 
    // Do something with the result 
    Food.appsController.set('selectedValue', content.title); 
    } 
}); 

इस तरह आप चयन की अनुक्रमणिका के बजाय किसी ऑब्जेक्ट को पार करने में सक्षम हैं।