1

假设我们有这样的视图： 小样

<script id="my-view" type="text/x-kendo-template">
    <div>
            <input data-text-field="name"
                   data-value-field="id"
                   data-role="dropdownlist"
                   data-bind="source:wellDataSource,events:{change:onWellChange,dataBound:onWellDataBound}" />
            <div data-role="tabstrip" data-bind="visible:isAnyWellExist">
            <ul class="bd-doc-navigation-tabstrip" data-freezable="false">
                <li class="k-state-active">Home</li>
                <li>Products</li>
                <li>About</li>
                <li>...</li>
            </ul>
    </div>
</script>

JS：

var _view = new kendo.View("my-view", { model: _viewModel});
_view.render("#container");

当我渲染视图时，我希望渲染所有三个小部件，然后触发它们的事件，但是当下拉列表渲染完成时，它的数据绑定和数据绑定事件在标签条和网格渲染之前触发。所以我无法访问这些事件中的tabstrip和grid小部件。

为什么会发生这种情况？是否有任何解决方案或解决方法可以确保在视图完全呈现后发生事件？

4

2 回答 2

1

Kendo DropDownList 有一个DataSource，仅供参考，事件DataBinding并DataBound在从服务器收集数据时自动触发。

因此，为了防止它这样做，您必须阻止 DropDownList 的数据初始化。您可以将 DropDownListAutoBind属性更改为false，因此它在初始化阶段不会向服务器发出请求。页面完全呈现后，您可以触发其DataSource调用read方法。

你的代码应该是这样的

<input data-text-field="name"
       data-value-field="id"
       data-role="dropdownlist"
       data-bind="source:wellDataSource,events: change:onWellChange,dataBound:onWellDataBound}"
       data-auto-bind="false" />

$(document).ready(function() {
     $("#dropdown").data().kendoDropDownList.dataSource.read();
});

Kendo DropDownList AutoBind 文档

于 2015-05-06T07:38:06.350 回答
0

每个小部件单独加载并且彼此并行，因此很可能一个小部件已完全数据绑定，而另一个小部件尚不存在。事件不会等到页面完全加载。

根据您实现它的方式，解决方法可能是将访问标签条和网格的代码移动到：

$(document).ready(function() {
   ...
});

要强制 Kendo 数据源同步运行，您可以尝试使用以下命令配置数据源传输async: false：

var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            async: false,
            url: function (data) {
                return "/Home/Product";
            },
            dataType: "json"
        },
    },
});

我找到了一种检查是否所有小部件都已绑定的方法。见这里。

例子：

<script>
    $(document).ready(function() {
        var promises = [];

        var change = function() {
            this.deferred.resolve();   
        }

        var categories = $("#categories").kendoDropDownList({
            dataTextField: "CategoryName",
            dataValueField: "CategoryID",
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
            },
            requestStart: function() {
                this.deferred = $.Deferred();
                promises.push(this.deferred.promise());
            }
          }
        }).data("kendoDropDownList");

        var products = $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Products"
                },
                requestStart: function() {
                    this.deferred = $.Deferred();
                    promises.push(this.deferred.promise());
                }
            }
        }).data("kendoDropDownList");

        categories.dataSource.bind("change", change);
        products.dataSource.bind("change", change);

        $.when.apply(null, promises)
            .done(function() {
                console.log("done");
                console.log(categories.value());
                console.log(products.value());
        });
    });
</script>
于 2015-05-06T06:20:02.150 回答