Chuyển tham chiếu của phần tử DOM đã nhấp vào trình xử lý tác vụ trong Ember

Question

Tôi có một nhóm các nút có trạng thái tôi muốn chuyển đổi với lớp active. Nếu tôi có một nút duy nhất, sau đó tôi sẽ ràng buộc các lớp active để sở hữu một bộ điều khiển và chuyển đổi sở hữu mà trong xử lý nhấp chuột:

<button {{action 'toggle'}} class="{{active}}">model.title</button> 

actions: { 
    toggle: function() { 
    this.set('active', true); 
    } 
} 

Nhưng tôi có nhiều nút, vì vậy tôi không chắc chắn những gì tôi có thể ràng buộc. Nó sẽ hữu ích nếu tôi có thể chuyển một tham chiếu đến nút đã nhấp vào trình xử lý hành động, nhưng tôi không chắc chắn cách thực hiện điều này.

{{#each item in model}} 
    <button {{action 'toggle' referenceToButton}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(buttonReference) { 
    // add `active` class to buttonReference 
    } 
} 

Cách tốt nhất để thực hiện việc này là gì?

Answer 1

Đây không phải là mặt hàng mẫu mà bạn muốn vượt qua chứ không phải nút?

Sau đó, nút chuyển đổi của bạn chỉ có thể đặt thuộc tính trên mục mà bạn bind to your button class.

{{#each item in model}} 
    <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(item) { 
    item.set('isActive', true); 
    } 
} 

Answer 2

Mặc dù tấm áp phích có câu trả lời anh muốn, tôi nghĩ rằng tôi muốn gửi một câu trả lời cho những gì tôi tin là mục đích của câu hỏi ban đầu:

Làm thế nào để có được một tài liệu tham khảo các nhấp DOM yếu tố từ một hành động? kể từ khi tôi đến đây tìm kiếm câu trả lời cho câu hỏi đó và không tìm thấy nó.

tôi không thể tìm thấy một cách để có được những yếu tố thực tế, nhưng bạn có thể nhận được các yếu tố xem gốc (mà kết thúc tốt đẹp các yếu tố xác định trong mẫu) thông qua this:

mẫu:

<button {{action 'toggle' this}}>model.title</button>

điều khiển, xem thành phần:

actions: { 
    toggle: function(event) { 
    // Get element (as in the return value of document.getElementById(id)) 
    var viewElements = event.element; 
    var elementsInTemplate = viewElements.children; 
    var button = viewElements.getElementsByTagName('button'); 
    //also can use getElementsByClassName, use jQuery etc. 
    } 
} 

Answer 3

Chỉ cần một câu trả lời ...

nếu bạn đặt các hành động trong onclick (hoặc bất kỳ sự kiện dom khác), bạn sẽ nhận được "sự kiện" javascript đối tượng trong tham số cuối cùng (do đó bạn có thể sử dụng event.target để có được và thao tác các đối tượng)

template:

<button onclick={{action 'toggle' model.title}}>model.title</button> 

Route hoặc điều khiển:

actions: { 
    toggle (title, event) { 
    // TODO: use title 
    let element = Ember.$(event.target); 
    element.toggleClass("active"); 

    return false; 
    } 
} 

Hy vọng nó giúp

Answer 4

Bạn có thể trong troduce active tài sản để items

{{#each item as |model|}} 
    <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button> 
{{/each}} 

nếu active=true sau đó active lớp sẽ được áp dụng cho nút.

actions: { 
    toggle: function(buttonReference) { 
    buttonReference.set('active', true); 
    } 
} 

Để trả lời câu tiêu đề câu hỏi Pass a reference of the clicked DOM element to the action handler in Ember.

1.Nếu bạn đang sử dụng thành phần, thì bạn có thể xác định bất kỳ thành phần nào trong số này list of event names trong thành phần và được thiết kế để nhận đối tượng event gốc. ví dụ., {{my-button model=model}}

export default Ember.Component.extend({ 
click(event){ 
    //oncliking on this componen will trigger this function 
    return true; //to bubble this event up 
} 
}) 

2.Nếu bạn đang sử dụng thẻ html như button thì bạn cần phải gán một (đóng cửa) hành động để xử lý sự kiện inline.

{{#each item as |model|}} 
     <button onclick={{action 'toggle' model}}>{{model.title}}</button> 
{{/each}} 

Trong hành động băm toggle chức năng sẽ luôn nhận được một trình duyệt tự event đối tượng như là đối số cuối cùng.

actions:{ 
toggle(model,event){ 

} 
} 

Trong định dạng <button {{action 'toggle' model}}>{{model.title}}</button> này, hành động toggle sẽ không nhận được event đối tượng,

Giải thích thực sự tốt trong ember dẫn https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions