我可以在kendo ui中进行条件绑定吗?

时间:2013-05-05 10:57:08

标签: kendo-ui

我需要的是将绑定应用于标记的一部分以显示在我的文档中(并应用其数据绑定属性),仅当指定的表达式求值为true时。 我尝试使用slideUp / slideDown和可见绑定来实现它。不同之处在于,使用slideUp / slideDown,包含的标记始终保留在DOM中并始终应用其数据绑定属性 - 可见绑定仅使用CSS来切换容器元素的可见性。我想我需要在DOM中添加或删除包含的标记,并且只有在表达式为真时才对后代应用绑定。任何人都可以为这个问题提出好的方法。

1 个答案:

答案 0 :(得分:6)

据我所知,您希望使用绑定修改HTML。为此,您可以使用HTML绑定。举个例子:

<div id="example">
    <input type="checkbox" data-bind="checked: value"/>
    <div id="wrapper" data-bind="html: setHTML"></div>
    <br />
    value: <span data-bind="text: value"></span>
</div>

var viewModel = kendo.observable({
    value: false,
    name: "Jack",
    setHTML: function (e) {
        var flag = this.get("value"),
            html;
        if(flag) { //include the html
            html = '<input id="name" data-bind="value: name" />';
            return html;
        } else { //remove the html
            return "";
        }
    }
});
kendo.bind($("#example"), viewModel);

请注意,插入的HTML元素不会绑定到View-Model。要实现这一点,您应该手动调用kendo.bind。

kendo.bind($("#wrapper"), viewModel);

我希望这个解决方案适合你的场景。