在 if 语句中淘汰奇怪的绑定问题
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 -->
上面的代码在 If We 在查看模式下添加一个标签,然后在 If 在编辑模式下添加控件,在这两种情况下,它都将包含在 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 -->
我想这是较少的代码,但它的重复代码。 我现在很好奇为什么我的第一次尝试没有奏效。
我猜 KNOCKOUT 遍历 DOM,因此注释需要在 DOM 树中处于同一级别,以便 KOUT 匹配开头和结尾注释。
以下节点表示结束注释在 DOM 中与开始注释处于不同的级别:
<a href="#"><!-- comment 1 --></a><!-- end comment 1 -->
下面是该标记的 DOM 树:
|-- A
|---- COMMENT
|-- COMMENT
..因此,KNOCKOUT找不到结束评论标签。
在我看来,您的最后一个代码示例没有错。不过,如果您担心这一点,则可以使用模板来减少代码重复。
相关文章:
- 使用AngularJS UI路由器时出现元素绑定问题
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- 挖空和显示模块模式的数据绑定问题
- 使用大括号的 Internet Explorer 上的 AngularJS 数据绑定问题
- backbone.js绑定问题
- SAPUI5绑定问题:json文件中维护的列表项链接不起作用
- Angular JS(嵌套变量)中的绑定问题
- 谷歌地图的ng绑定问题
- jquery 中的事件绑定问题
- 挖空可观察数组下拉绑定问题
- 承诺,然后绑定问题
- 复杂数据和自动完成的绑定问题
- 在 if 语句中淘汰奇怪的绑定问题
- 角度形式绑定问题
- fancyboxjquery关于gridview的templete字段绑定问题
- angularjs数据绑定问题
- ngRepeat中的AngularJS绑定问题(折叠和展开Caret)
- 淘汰数据绑定问题
- 使用 IE 11 和 AngularJS 的 2 路数据绑定问题
- CasperJS绑定问题