Question

假设我们有这样的观点： mockup

for(i=0; i<strlen(line); i++)    /* need #include <string.h> */
{
    printf("%c",line[i]);
}
printf("\n");

JS：

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

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

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

Answer 1

Kendo DropDownList有DataSource，FYI事件DataBinding和DataBound在从服务器收集数据时自动触发。

因此，为防止它这样做，您必须阻止DropDownList的数据初始化。您可以将DropDownList AutoBind属性更改为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 Documentation

Answer 2

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

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

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

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

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

我找到了一种方法来检查是否已绑定所有小部件。请参阅here。

示例：

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

为什么窗口小部件的事件在视图完全呈现之前触发？

2 个答案: