Кэширование объекта DataSource пользовательского интерфейса Kendo с использованием localStorage

Я использую Kendo UI ComboBox с внешним источником данных XML. Вот код источника данных:

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

Это создает источник данных, вот код, который создает поле со списком кендо:

$("#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, но когда вы покидаете страницу и возвращаетесь, источник данных всегда равен нулю. Я вижу это, используя вкладку ресурсов инструментов разработчика Chrome, но она не будет правильно привязана к полю со списком. Любая помощь или если мне нужно что-то уточнить, чтобы сделать это более ясным, пожалуйста, дайте мне знать

Спасибо -с


local-storage kendo-ui
person Sean    schedule 19.10.2012    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Для этого вы можете использовать собственный метод чтения (ссылка).

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/

person sasheto    schedule 06.12.2012