Почему виртуальная машина привязки данных после инициализации сетки Kendo работает в Chrome, а не в IE?

Я настроил простой пример в jsFiddle, где я инициализирую сетку кендо, а затем привязываю модель представления. Данные заполняются в сетке для каждой строки в Chrome, но не в IE9.

Вот html:

<div id="example">
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units</th>
        </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: products"></tbody>
</table>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
    </tr>
</script>
</div>

Вот JS:

$(document).ready(function () {
var viewModel = kendo.observable({
    products: [{
        name: "Hampton Sofa",
        price: 989.99,
        unitsInStock: 39
    }, {
        name: "Perry Sofa",
        price: 559.99,
        unitsInStock: 17
    }, {
        name: "Donovan Sofa",
        price: 719.99,
        unitsInStock: 29
    }, {
        name: "Markus Sofa",
        price: 839.99,
        unitsInStock: 3
    }]
});

   $("#example table").kendoGrid();
   kendo.bind($("#example"), viewModel);
});

Вот jsFiddle: http://jsfiddle.net/e2XHN/1/

В моем исходном примере я использую data-role="grid" для элемента таблицы, но этот код понятнее. Если $("#example table").kendoGrid(); стоит после kendo.bind($("#example"), viewModel);, то он работает в IE. Если раньше то не работает и в консоли не появляется никаких исключений. В хроме работает в обе стороны.

Я знаю, что могу просто настроить его как источник данных для сетки. Я предпочитаю использовать data-role="grid", вот почему меня это волнует.

Итак, у меня есть обходной путь, но кто-нибудь знает, почему это не работает в IE9, но работает в Chrome?

Я бы просто открыл это как ошибку в Telerik, но когда я захожу в их общедоступный трекер проблем (http://www.telerik.com/support/pits.aspx) у меня ничего не отображается.


kendo-grid kendo-ui internet-explorer-9 kendo-mvvm
person bygrace    schedule 03.01.2014    source источник
comment
Один нежелательный побочный эффект инициализации сетки данных после привязки данных заключается в том, что если у вас есть флажки в tbody trs, они будут удалены, но останутся, если вы выполните привязку данных после инициализации сетки данных (конечно, в хроме).   -  person bygrace    schedule 03.01.2014

Ответы (2)


arrow_upward
1
arrow_downward

У меня были похожие проблемы с Kendo Grid. Он работал с Chrome, Firefox, IE11 и IE10, но не с IE9.

Я обнаружил, что в шаблоне строки был «недопустимый» HTML, в моем случае <table> вокруг <tr>, что допускалось более современными браузерами, но не IE9.

У меня не было ошибок, просто грустная пустая сетка.

Итак, совет: проверьте свой шаблон строки, потому что, если есть что-то недопустимое, он просто не будет отображать содержимое в <tbody>.

person ceetheman    schedule 10.02.2015

arrow_upward
0
arrow_downward

Вы должны использовать data-row-template в таблице и связывать данные там, а не в tbody:

См. обновленную работу Fiddle здесь

<div id="example">
<table data-row-template="row-template" data-bind="source: products">
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units</th>
        </tr>
    </thead>
</table>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
    </tr>
</script>
</div>
person Bruno Pessanha    schedule 08.05.2015