如何在列表項MVVM劍道中顯示/隱藏項

Question

<script type="text/x-kendo-tmpl" id="my-template">
    <ul >
        <li>
        <div onclick="showToggle()"> Show/Hide Form</div>
        <div id="myform"> My Form Stuff</div>
        </li>
    <ul>
</script>

因此，在上面我想單擊div或按鈕以及其他內容，然后切換列表項的另一部分。

            <ul data-role="listview" id="myList"
                data-bind="source: listOfStuff"
                data-template="my-template"></ul>

現在我真的不能為此分配ID。 我只想用下面的一些功能切換它。 也許這更多是一個JavaScript問題。 我想我也可以在mvvm中的對象列表中添加另一個變量，然后在單擊時將其設置為visible true，但我不希望在視圖模型上添加。

function showToggle(){
if ( $('#myform') visible) do
   $('#myform').hide();
else 
  $('#myform').show();
}

Answer 1

您可以使用jQuery On將一個或多個事件的事件處理函數附加到所選元素。 為您的div設置類選擇器，並為該類注冊單擊處理程序。

<script type="text/x-kendo-tmpl" id="my-template">
<ul >
    <li>
    <div class="show-hide"> Show/Hide Form</div>
        <div>My Form Stuff</div>
    </li>
<ul>

$('.show-hide').on('click', function(e) {
    console.log( e ); // e is div 
});