Knockout - Bắt nhấp yếu tố

Question

Tôi có sau mark-up:

<fieldset> 
    <div> 
     <label class="editor-label">Question 1?</label> 
     <input type="text" class="editor-field" />  
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 2?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 3?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
</fieldset> 

Tôi muốn chuyển tầm nhìn của các <p> với lớp help trong cùng Div như nút bấm. Tôi đang cố gắng sử dụng $ (this) để xác định nút nào đã được nhấp và sau đó tôi có thể nhận được phần tử "trợ giúp" chính xác từ đó.

Vấn đề là $(this) không trả lại nút được nhấp.

Hiện nay tôi đang cố gắng để đơn giản giấu nút bấm như:

var viewModel = { 
    helpClicked: function() { 
     $(this).hide();   
    } 
}; 

ko.applyBindings(viewModel); 

này không hoạt động. Ai có thể giúp tôi không?

Answer 1

Đây là một jsFiddle với một giải pháp khả thi:

http://jsfiddle.net/unklefolk/399MF/1/

Bạn có thể nhắm mục tiêu các yếu tố DOM bạn muốn thông qua này cú pháp:

var viewModel = {  
    helpClicked: function (item, event) { 
     $(event.target).hide(); 
     $(event.target).next(".help").show()    
    } 
}; 
ko.applyBindings(viewModel); ​ 

Answer 2

hãy thử sử dụng event.currentTarget tiếp theo next()

$(event.currentTarget).next().hide(); 

Working example here

Answer 3

Các div đó bên trong fieldset được tạo thông qua Knockout? (họ trông mẫu). Nếu vậy, tôi nghĩ cách tiếp cận MVVMish hơn sẽ là trích xuất mục bị ràng buộc hiện tại từ trình xử lý nhấn nút và ràng buộc khả năng hiển thị của từng đoạn trợ giúp cho thuộc tính mô hình chế độ xem bởi trình xử lý đó trên mục tương ứng, thay vì làm các hoạt động UI theo cách thủ tục. Ít nhất, đây là mô hình mà tôi đã di chuyển theo hướng và tìm thấy nó đẹp hơn nhiều (đặc biệt là sau khi làm những việc tương tự trong WPF và Silverlight).

Answer 4

This should work 

var viewModel = 
{ 
     helpClicked: function (data,element) { 
     /* 
     data is the current model passed to the button 
     element is the button currently interacting with 
    but to get the dom object equivalent of the 
    element you've to access it   
    via its currentTarget property 
    */ 
     $(element.currentTarget).hide();   
    } 
}; 

ko.applyBindings(viewModel);