2012-01-18 60 views
19

Tôi đang cố gắng tạo đầu vào được chọn và chuyển đối tượng đã chọn đến sự kiện thay đổi trên chế độ xem. Ví dụ về liên hệ ember sử dụng một <ul> nhưng với một lựa chọn, chế độ xem cần phải ở bên ngoài mỗi cách khác, thay đổi đó thậm chí không được kích hoạt.trình đơn thả xuống chọn với ember

Đây là js xem:

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]); 
    } 
}); 

Các ul từ ví dụ hoạt động:

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

Nhưng nếu tôi thay thế html trực tiếp, sự kiện thay đổi không được sa thải (có ý nghĩa)

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

Vì vậy, tôi đoán lựa chọn phải được bao bọc trong chế độ xem .. trong trường hợp này làm cách nào để tôi vượt qua các đối tượng có liên quan ... Mã này kết quả trong toàn bộ mảng được thông qua:

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

@dhenze liên kết hữu ích, mặc dù câu trả lời hàng đầu sử dụng bộ sưu tập không được chấp nhận và câu trả lời thứ hai trả về giá trị chứ không phải đối tượng. Tôi tạo ra fiddle [link] (http://jsfiddle.net/haydenchambers/Kekj3/) trả về đối tượng NHƯNG nó đi qua chỉ mục bên trong lựa chọn vì vậy tôi không thể nhóm chúng theo kiểu bên trong optgroups (mục tiêu cuối cùng của tôi) –

Trả lời

36

Hiện tại, Ember có chế độ xem Chọn được tích hợp sẵn.

Dưới đây là một ví dụ sử dụng:

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'}) 
    ] 
}); 

Mẫu của bạn sẽ trông như thế:

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

Một lần nữa, đây là một ví dụ jsFiddle: http://jsfiddle.net/ebryn/zgLCr/

+10

tuyệt vời ! hy vọng những loại ví dụ này được thêm vào trang web emberjs, nó sẽ làm cho quá trình học tập trở nên đau đớn hơn rất nhiều –

+0

một cái gì đó như thế chắc chắn sẽ biến nó thành cốt lõi - giống như Em.Button –

+2

Cảm ơn bạn đã viết. Bởi vì nó được liên kết với ember-latest, nó cần một số cập nhật script. Tôi đã thay đổi nó để sử dụng jQuery 1.8.3 và Handlebars 1.0.beta.6: http: // jsfiddle.net/zgLCr/622/ –

2

séc ra câu trả lời cho một câu hỏi tương tự: How to bind value form input select to attribute in controller

Trong ví dụ một CollectionView được sử dụng với một tagname = lựa chọn. Bạn có thể thấy điều này hữu ích trong việc làm cho nó hoạt động.

EDIT: Kể từ khi tôi đã tìm cách để thực hiện một lựa chọn bản thân mình, đây là giải pháp tôi đến với:

views/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}} 

Các chọn là một phần của một hình thức. Tôi kiểm tra sự kiện nộp và ở đó đọc giá trị:

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() 

Hope this helps.

2

Đây không phải là một câu trả lời, chỉ cần một sửa chữa trên các liên kết jsfiddle bị hỏng .. Rõ ràng jsfiddle không có tình yêu cho ember:/Nhưng JsBin nào! http://jsbin.com/kuguf/1/edit

Các vấn đề liên quan