爲什麼在視圖完全呈現之前觸發小部件的事件？

Question

讓我們說我們有這樣的觀點：

<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"); 

當我渲染視圖我希望所有這三個部件渲染，然後將它們的事件觸發，但是當下拉列表渲染完成它的數據綁定和數據綁定事件發生前tabstr IP和網格呈現。所以我無法在這些事件中訪問標籤條和網格小部件。

爲什麼會發生這種情況？是否有任何解決方案或解決方法，以確保事件發生後視圖呈現totaly？

Answer 1

劍道的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() { 
    ... 
}); 

要強制劍道數據源的行爲同步，你可以嘗試配置您的數據源與運輸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>