如何显示/隐藏列表项MVVM kendo中的项目

时间:2014-08-22 18:02:25

标签: javascript html5 templates kendo-ui

<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中添加另一个变量给我的对象列表,然后在点击时将其设置为true,但我不想添加到视图模型上。

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

1 个答案:

答案 0 :(得分:0)

您可以使用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 
});