Kendo ui 为什么是widgets'；在视图完全呈现之前触发的事件？

假设我们有这样的观点：

主页
产品
关于

JS:

var\u view=new kendo.view（“我的视图”{model:\u viewModel}）；
_view.render（“#容器”）；

当我渲染视图时，我希望所有三个小部件都被渲染，然后触发它们的事件，但是当dropdownlist渲染完成时，它的数据绑定和数据绑定事件会在tabstrip和grid渲染之前触发。因此，我无法访问这些事件中的tabstrip和grid小部件

---

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

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

根据您实现它的方式，解决方法可能是将访问tabstrip和grid的代码移动到：

$(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>

$（文档）.ready（函数（）{
var承诺=[]；
var change=function（）{
this.deferred.resolve（）；
}
var类别=$（“#类别”）。kendoDropDownList({
dataTextField:“CategoryName”，
dataValueField:“类别ID”，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Categories"
},
requestStart:function（）{
this.deferred=$.deferred（）；
promises.push（this.deferred.promise（））；
}
}
}).数据（“kendoDropDownList”）；
var产品=$（“#产品”）。kendoDropDownList({
dataTextField:“产品名称”，
dataValueField:“产品ID”，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Products"
},
requestStart:function（）{
this.deferred=$.deferred（）；
promises.push（this.deferred.promise（））；
}
}
}).数据（“kendoDropDownList”）；
categories.dataSource.bind（“change”，change）；
products.dataSource.bind（“change”，change）；
$.when.apply（空，承诺）
.done（函数（）{
控制台日志（“完成”）；
console.log（categories.value（））；
console.log（products.value（））；
});
});

Kendo DropDownList有一个

数据源

，供参考，从服务器收集数据时会自动触发事件

数据绑定

和

数据绑定

因此，为了防止它这样做，您必须防止DropDownList的数据初始化。您可以将DropDownList

AutoBind

属性更改为

false

，这样它在初始化阶段不会向服务器发出请求。页面完全呈现后，您可以触发其

数据源

调用

读取

方法

您的代码应该是这样的

<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();
});

$（文档）.ready（函数（）{
$（“#下拉列表”）.data（）.kendoDropDownList.dataSource.read（）；
});

---

谢谢你，伙计，但是我们正在编写一个包含嵌套视图的复杂SPA，我们需要在文档准备就绪后多次这样做，所以文档准备就绪对我们没有帮助。如果JS是单线程的，这对我来说很奇怪，那么为什么在另一个方法（render）未完全运行时触发事件呢？还有其他想法或帮助吗？剑道UI执行Ajax调用来填充它的小部件。默认情况下，这些是异步的。也许禁用此选项会对您有所帮助，但不确定。通过设置

async:false

rendering，视图的其余部分将暂停，直到ajax从服务器获得响应。所以这并不能解决问题。另一件我想出来但不确定的事情是，在呈现所有小部件后，第一次出现数据绑定，但下一次出现问题时，因为这一次数据已在数据源中准备就绪，并且小部件绑定到数据源时，它的数据绑定事件已触发。感谢兄弟，您的回答引导我找到最终解决方案（解决方案），顺便说一句，它迫使我进行额外的编码，并且总是关心如何将自动绑定设置为false，以及如何调用数据源。另一件需要提及的事情是，

fetch（）

比

read（）

更明智，因为每次调用read都会向服务器发送请求。是的，这取决于用户界面的工作方式，以及您使用的小部件的类型。祝你好运：我把这个答案标记为接受答案，但对我的问题有任何更详细的答案表示赞赏。我把下面的答案标记为接受答案，但对我的问题有任何更详细的答案表示赞赏