为什么在初始化Kendo网格后数据绑定VM在Chrome中工作而不是IE?

时间:2014-01-03 17:54:56

标签: kendo-ui internet-explorer-9 kendo-grid kendo-mvvm

我在jsFiddle中设置了一个简单的例子,我初始化一个kendo网格,然后绑定一个viewmodel。数据填充在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中有效。如果它在此之前它不起作用,并且控制台中不会出现异常。它在chrome中都有两种作用。

我知道我也可以将其设置为网格的数据源。我的偏好是使用data-role="grid",这就是我关心的原因。

所以我有一个解决办法,但是有人知道为什么这在IE9中不起作用但在Chrome中不起作用吗?

我只是打开这个作为Telerik的错误但是当我转到他们的公共问题跟踪器(http://www.telerik.com/support/pits.aspx)时,它对我来说是空白的。

2 个答案:

答案 0 :(得分:1)

我遇到过与剑道网格类似的问题。它与Chrome,Firefox,IE11和IE10合作,但不适用于IE9。

我发现行模板有“无效”HTML,在我的情况下<table>围绕着<tr>,这是由更现代的浏览器容忍的,但不是IE9所容忍的。

我没有犯错,只是一个悲伤的空格。

所以建议是,检查你的行模板,因为如果有什么东西无效,它就不会在<tbody>中呈现内容。

答案 1 :(得分:0)

You should use data-row-template on the table and bind the data there as well rather than in the tbody:

See updated Fiddle working here

var mongodb  = require('mongodb');
var MongoClient = mongodb.MongoClient;

var url = "mongodb://user:pass@db1,db2,db3/admin";

MongoClient.connect(url, function(err, db) {

    console.log("Connected correctly to server");
    console.log("Current database", db.databaseName);

    // switch context to database foo
    // foo.bar.findOne();

    db.close();

});