剑道可见绑定不适用于 data-align 属性？答案

【问题标题】：Kendo visible binding does not work with data-align property?剑道可见绑定不适用于 data-align 属性？
【发布时间】：2015-07-22 09:32:45
【问题描述】：

我刚刚在 kendo-ui 中遇到了一些奇怪的数据绑定问题。

<div data-role="view" data-title="hi" data-model="viewmodel">  
    <div data-role="header">
        <div data-role="navbar">
            <div data-role="view-title"></div>
            <span data-bind="visible: visible">
                <span data-align="right" data-role="button">edit</span>
            </span>
        </div>
    </div>
</div>  

<script>  
    var viewmodel = kendo.observable({
        visible: true
    });    
    var app = new kendo.mobile.Application();  
</script>

我设置了一个 DOJO 示例来说明我遇到的错误。 DOJO EXAMPLE

如您所见，我的viewmodel 中的visible 属性设置为false。这意味着，根据我设置的绑定，它应该隐藏按钮。但无论我将visible 标志设置为true 还是false，按钮总是显示。（更改可见标志后重新运行 sn-p）

但后来我尝试删除/添加属性以检查是什么“阻止”了可见绑定。我发现是按钮属性data-align="right"“阻止”了可见绑定。

您可以在这个example（我从按钮中删除data-align 属性）中看到，当您将viewmodel 中的visible 标志更改为true 或false 时，它实际上隐藏/显示基于visible 标志的按钮。

有人知道这个错误和/或有解决方法/解决方案吗？

【问题讨论】：

标签： data-binding kendo-ui kendo-mobile

【解决方案1】：

看起来你正在绑定一个带有嵌套 span 的 span 元素，其中包含一个按钮。

两个跨度都有数据绑定，但您只在按钮上设置对齐；这应该像这样设置为外部容器：

<!-- add the data-align on this outer 'container' element -->
<span data-align="right" data-bind="visible: visible">
    <!-- ... and not on the element below here... -->
    <button data-role="button">edit</button>
</span>

我还克隆并更新了your dojo example here。

【讨论】：