我有以下代码:
<div id="resultlist" data-bind="foreach: content">
<ul style="list-style-type:none;">
<li>
<div class="result" data-bind="event:{ mouseover:myfunction, mouseout:myFunction2}">
<div class ="resultlisticoncontainer">
<div class="resultcontenttypeIcon myclassHidden" data-bind="css: { myclassVisible: newClass() == true, myclassHidden: newClass() == false }">
<object id="contentIcon" data="img/File_Icon_24x24.svg" type="image/svg+xml" width="100%" height="100%"></object>
</div>
<div class="resultcontenttypeIcon myclassHidden" data-bind="css: { myclassVisible: newClass() == true, myclassHidden: newClass() == false }>
<object id="marple" data="img/Glass_Icon_24x24.svg" type="image/svg+xml" width="100%" height="100%"></object>
</div>
</div>
<p><span data-bind="text: name" class="filenamestlye"></span></p>
<p><span data-bind="text: file_path" class="urlstyle"></span></p>
<p><span data-bind="html: highlight" ></span></p>
</div>
</li>
</ul>
</div>
所以我想要做的是,当我将鼠标放在div上时,使用类&#34;结果&#34;,div为class&#34; resultcontenttypeIcon&#34;应该可见。这很好,但问题是,这发生在使用foreach循环创建的每个div子节点上。所以我想要的是,只有悬停div的div子才会变得可见,因此不会为每个div触发事件鼠标悬停。我认为问题是,对于整个视图模型,newClass值变为true。
这是我的viewmodel代码:
function ItemListViewModel() {
newClass= ko.observable(true);
myfunction = function() {
newClass(true);
},
myFunction2= function(){
newClass(false);
},
}
ko.applyBindings(new ItemListViewModel());
答案 0 :(得分:1)
我认为您可能会发现CSS更容易实现。这是一个JSFiddle,它做我想你想要的。我用图像替换了对象,使其在屏幕上工作。由于我们没有你的CSS,显然布局被打破了。
http://jsfiddle.net/Quango/010vn1ra/
该方法非常简单:默认情况下,要隐藏的类定义为display: none
。
然后,我们在:hover
类上添加result
,以更改子类的display
。这意味着您不需要任何绑定来执行此操作。
答案 1 :(得分:0)
CSS :hover
选择器确实运行良好,如果你没有依赖于哪个元素的余地。但是,例如,如果要在其他位置显示列表中元素索引的文本,更改模板或触发函数,则仍需要绑定事件。
我们可以阻止事件所绑定的元素吸收&#39;该事件归功于Knockout传递给绑定函数的参数:data
&amp; event
。
通过一点目标检查,您的容器鼠标悬停功能如下所示:
app.updateHovered = function(data,e) {
var target = e.target || e.srcElement,
// ko.contextFor passes the context of the object, including the $index observable
index = ko.contextFor(target).$index();
// the following check depends on your elements of course
if (target.nodeName === 'DIV' && target.parentNode.nodeName === 'DIV')
app.isVisible(index); // isVisible holds the currently 'selected index'
}; // and a simple 'false' setter on mouse out
app.removeHovered = function(data, e) {
app.isVisible(false);
}
上述示例HTML:
<div data-bind="foreach: list, event: { mouseover: updateHovered, mouseleave: removeHovered }">
<div>
<span data-bind="text: $index, visible: $index() === $parent.isVisible()"></span>
</div>
</div>
<h3 data-bind="text: typeof isVisible() === 'number' ? 'Howdy, you selected item ' + isVisible() : ''"></h3>
查看非常简单的 demo ,其中isVisible
属性包含最后一个悬停列表项的$ index。
事实上,这是关于委派活动的,所以您可能还想查看R. Niemeyer的Knockout-delegatedEvents绑定,它会为您自动完成此过程。