如何将knockout模板循环中的click-event更改为mouseover

时间:2014-02-08 18:49:15

标签: javascript jquery javascript-events knockout.js

我有这个HTML:

 <div id="accordion" data-bind="jqAccordion: { },template: { name: 'tb-template', foreach: Items,  afterAdd: function(elem){$(elem).trigger('valueChanged');} }" class="group accordion ui-widget ui-helper-clearfix" ></div>                                   

使用模板:

 <script type="text/html" id="tb-template" >
    <div data-bind="attr: {'id': 'Text' + TextId}, click: $root.SelectedText" class="group ui-widget-content ui-corner-tr" >
        <div class="accordion-header  ui-widget-header">
        <table>
               <tbody>
                    <tr>
                        <td><span data-bind="text:Title"></span></td>
                    </tr>          
                 </tbody>
             </table>
         </div>
     </div>
</script>

当点击我的项目列表中的每个元素时,我会显示一个包含项目信息的div:

<div class="" data-bind="with: SelectedText">           
    <label>Id:</label><span data-bind="text: Id"></span> 
    <h1 data-bind="text: Title"></h1>
    <label>Description:</label><span data-bind="value: Description" class="description"></span>         
</div>

最后一个div正在响应手风琴中的click-event。现在我想让它响应鼠标悬停/悬停而不是点击。我试图只是切换事件名称,但这显然不起作用。我怎样才能以我想要的方式做出回应?

1 个答案:

答案 0 :(得分:1)

参考http://knockoutjs.com/documentation/event-binding.html有关如何正确使用事件绑定的更多详细信息。

 <div data-bind="attr: {'id': 'Text' + TextId}, event:{ mouseover: $root.SelectedText}" class="group ui-widget-content ui-corner-tr" >

上面的代码将启用手风琴中的下一个元素。请记住,这只会启用下一个元素,你需要一个非常大的编辑来实际让它在mouseout上禁用。