[英]knockout weird binding issue in if statement
这很奇怪,在互联网上拖了一段时间后,我似乎也找不到任何参考。
我正在使用淘汰赛将图像列表绑定到视图/编辑控件。
在这里,我有我最初的尝试
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<!-- /ko -->
<img data-bind="attr: { src : imageThumbnail }" />
<!-- ko if: $parent.mode() == 'view' -->
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
上面的代码在我们处于查看模式的情况下添加了一个标签,然后在我们处于编辑模式的情况下添加了一个控件,在两种情况下都将包含在img标签中。 奇怪的是img src绑定不起作用。 但是如果我执行以下操作
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<img data-bind="attr: { src : imageThumbnail }" />
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<!-- /ko -->
<!-- ko if: $parent.mode() == 'view' -->
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
我在这里所做的只是将img标签添加到if / endif if / endif之外的顶部,并且它绑定得很好。 为了解决这个问题,我求助于
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<img data-bind="attr: { src : imageThumbnail }" />
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<img data-bind="attr: { src : imageThumbnail }" />
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
我猜这是更少的代码,但它的重复代码。 现在我很好奇为什么我的第一次尝试没有奏效。
我猜想敲除遍历了DOM,因此注释需要在DOM树中处于同一级别,以便敲除以匹配打开和关闭注释。
以下节点表示结束注释在DOM中与开始注释处于不同级别:
<a href="#"><!-- comment 1 --></a><!-- end comment 1 -->
这是该标记的DOM树:
|-- A
|---- COMMENT
|-- COMMENT
..因此,淘汰赛找不到结束语注释标签。
我认为您的最后一个代码示例没有错。 您可以使用模板来减少代码重复,尽管这是您所关心的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.