Нокаут - элемент клика

У меня есть следующая надбавка:

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

Я хочу переключить видимость <p> с классом help в том же Div, что и нажатая кнопка. Я пытаюсь использовать $(this), чтобы определить, какая кнопка была нажата, а затем я могу получить правильный "help" элемент оттуда.

Проблема в том, что $(this) не возвращает нажатую кнопку.

В настоящий момент я пытаюсь просто скрыть нажатую кнопку, например:

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

ko.applyBindings(viewModel);

Это не работает. Может ли кто-нибудь помочь?

Ответы

Ответ 1

Вот jsFiddle с одним возможным решением:

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

Вы можете настроить таргетинг на элементы DOM с помощью этого синтаксиса:

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

Ответ 3

Являются ли те divs внутри набора полей, построенного через Knockout? (они выглядят шаблонно). Если это так, я думаю, что более MVVMish способ приблизиться к этому будет состоять в том, чтобы извлечь связанный с ним элемент из обработчика нажатия кнопки и привязать видимость каждого абзаца справки к свойству модели представления, заданному этим обработчиком соответствующего элемента, вместо того, чтобы делать процедуры пользовательского интерфейса процедурно. По крайней мере, это образец, к которому я продвигался, и находил его намного приятнее (особенно после подобных действий в WPF и Silverlight).

Ответ 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);