我正在使用带有外部XML DataSource的Kendo UI ComboBox。这是DataSource代码:
try
{
var csDataSrc = new kendo.data.DataSource(
{
transport:
{
read: "Data/StateList.xml",
dataType: "xml",
create: { cache: true }
},
schema:
{
type: "xml",
data: "/States/State",
model:
{
fields:
{
id: "id/text()",
name: "name/text()"
}
}
}
});
csDataSrc.read();
}
catch (err)
{
log.error(err.message);
}
创建数据源,这是创建kendo组合框的代码:
$("#stateList").kendoComboBox(
{
index: 0,
placeholder: "Begin typing Coverage State...",
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: csDataSrc,
text: $("#hdnStateName").val(),
value: $("#hdnStateKey").val(),
change: function(e)
{
$("#hdnStateKey").val(this.value());
$("#hdnStateName").val(this.text());
}
});
这非常有效,但真实列表的数据非常庞大,我想将它存储在本地存储中,如下所示: localStorage.setItem(“state_key”,csDataSrc); 然后当页面加载而不是始终从服务器端xml构建和读取时,我希望它是这样的:
var csDataSrc = localStorage.getItem("state_key");
if(csDataSrc === null)
{
// create the data source with the above code
// and store it in localStorage.
}
然后在这里绑定它......
...kendoComboBox(
{
...,
.dataSource: csDataSrc,
...
});
我创建数据源很好,似乎在localStorage中正确存储但是当你离开页面并返回时,数据源始终为null。我可以使用Chrome开发人员工具的资源标签查看它,但它不会正确绑定到组合框。 任何帮助或如果我需要详细说明任何事情以使其更清楚,请告诉我
由于 -s
答案 0 :(得分:10)
要实现这一点,您可以使用自定义读取方法(link)。
transport: {
read: function(operation) {
var cashedData = localStorage.getItem("moviesData");
if(cashedData != null || cashedData != undefined) {
//if local data exists load from it
operation.success(JSON.parse(cashedData));
} else {
$.ajax({ //using jsfiddle's echo service to simulate remote data loading
url: '/echo/json/',
type: "POST",
dataType: "json",
data: {
json: JSON.stringify(data)
},
success: function(response) {
//store response
localStorage.setItem("moviesData", JSON.stringify(response));
//pass the pass response to the DataSource
operation.success(response);
}
});
}
}
}
以下是一个工作示例:http://jsfiddle.net/LnTe7/12/