एम्बर

Question

के साथ ड्रॉपडाउन का चयन करें मैं एक चयन इनपुट तैयार करने की कोशिश कर रहा हूं और चयनित ऑब्जेक्ट को दृश्य ईवेंट में बदल सकता हूं। एम्बर संपर्क उदाहरण <ul> का उपयोग करता है लेकिन चयन के साथ दृश्य को प्रत्येक के बाहर होने की आवश्यकता होती है अन्यथा परिवर्तन को भी निकाल दिया नहीं जाता है।

App.SelectView = Ember.View.extend({ 

    change: function(e) { 
     //event for select 
     var content = this.get('content'); 
     console.log(content); 

     App.selectedWidgetController.set('content', [content]); 
    }, 
    click: function(e) { 
     //event for ul 
     var content = this.get('content'); 
     console.log(content); 

     App.selectedWidgetController.set('content', [content]); 
    } 
}); 

ul उदाहरण से काम करता है::

यहाँ देखने js है

<ul> 
    {{#each App.widgetController.content}} 
     {{#view App.SelectView contentBinding="this"}} 
      <li>{{content.name}}</li> 
     {{/view}} 
    {{/each}} 
</ul> 

लेकिन अगर मैं सीधे एचटीएमएल की जगह, परिवर्तन घटना निकाल दिया नहीं है (जो समझ में आता है)

<select> 
    {{#each App.widgetController.content}} 
     {{#view App.SelectView contentBinding="this"}} 
      <option>{{content.name}}</option> 
     {{/view}} 
    {{/each}} 
</select> 

तो मुझे लगता है कि चयन को दृश्य में लपेटना होगा .. इस मामले में मैं कैसे कर सकता हूं प्रासंगिक वस्तु पारित ... पूरे सरणी में इस कोड को परिणाम पारित किया जा रहा:

{{#view App.select_view contentBinding="App.widgetController.content"}} 
    <select> 
    {{#each App.widgetController.content}} 
     <option>{{name}}</option> 
    {{/each}} 
    </select> 
{{/view}} 

Answer 1

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

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://jsfiddle.net/ebryn/zgLCr/

Answer 2

जांच एक ऐसी ही सवाल का जवाब: How to bind value form input select to attribute in controller

उदाहरण एक CollectionView एक टैगनाम साथ प्रयोग किया जाता है = चुनते हैं। आपको यह काम करने में मदद मिल सकती है।

संपादित करें:

विचारों/form.js.hjs:

{{#view contentBinding="App.typeController" valueBinding="type" tagName="select"}} 
    {{#each content}} 
     <option {{bindAttr value="title"}}>{{title}}</option> 
    {{/each}} 
{{/view}} 
{{#view Ember.Button target="parentView" action="submitEntry"}}Save{{/view}} 

का चयन एक का हिस्सा है जब से मैं लागू करने के लिए देख रहा था एक अपने आप का चयन करें, यहाँ समाधान मैं के साथ आया है प्रपत्र। मैं प्रस्तुत घटना के लिए जाँच करते हैं और वहाँ में मूल्य पढ़ें:

app.js.coffee

# provides the select, add value: 'my_id' if you need differentiation 
# between display name (title) and value 
app.typeController = Ember.ArrayProxy.create 
    content: [{title:'Energy'}, {title:'Gas'}, {title:'Water'}] 

# simplified version, but should prove the point 
app.form_view = Ember.View.create 
    templateName: 'views_form' 
    type: null 
    submitEntry:() -> 
    console.log this.$().find(":selected").val() 

आशा इस मदद करता है।

Answer 3

यह एक जवाब है, बस एक नहीं है:

{{view Ember.Select 
     contentBinding="App.peopleController" 
     selectionBinding="App.selectedPersonController.person" 
     optionLabelPath="content.fullName" 
     optionValuePath="content.id"}} 

फिर, यहाँ एक jsFiddle उदाहरण है टूटी jsfiddle लिंक पर ठीक है .. जाहिर है jsfiddle एम्बर के लिए कोई प्यार नहीं है:/लेकिन जेएसबीन करता है! http://jsbin.com/kuguf/1/edit