WinJS - постоянные обновления списка

Не совсем уверен, как сформулировать эту проблему, поэтому я надеюсь, что это имеет смысл.

Я хочу создать список и настроить все привязки данных, создать шаблон и т. д., чтобы он хорошо отображал данные, но один из элементов на каждой плитке списка, которую я показываю, — это живые тикающие часы. На самом деле вопрос заключается в том, как обновить все объекты списка без перерисовки всего списка.

Единственный рабочий метод, который у меня есть на данный момент, - это обновлять привязанные к нему данные каждую секунду со временем, которое я хотел бы отобразить, что работает, но перерисовывает весь список. Это дорого и запускает анимацию (которую можно отменить, но не полностью прослушивать событие запуска анимации)

Спасибо!


listview winjs windows-8
person Andy    schedule 15.11.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Одним из способов было бы использование шаблона JavaScript для вашего списка. Привяжите данные к списку как обычно, но добавьте в модель данных свойство под названием часы. Для элемента данных, который вы хотите отобразить в виде часов, установите для него значение true. Вместо того, чтобы определять шаблон в HTML, определите шаблон в JavaScript (вы можете увидеть, как это сделать здесь — http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx).) Затем в шаблоне JavaScript можно добавить некоторую логику, чтобы определить, должны быть часы на основе связанного свойства, и если это создаст шаблон часов:

function itemTemplateFunction(itemPromise) {

        return itemPromise.then(function (item) {

            if (item.data.clock == true) {
                //TODO: Append HTML and JS for your clock object
                //TODO: Perhaps set up a setInterval timer to tick your clock along.

            }
            else {
                //TODO Add the regular template Code, example below
                var div = document.createElement("div");

                var img = document.createElement("img");
                img.src = item.data.picture;
                img.alt = item.data.title;
                div.appendChild(img);

                var childDiv = document.createElement("div");

                var title = document.createElement("h4");
                title.innerText = item.data.title;
                childDiv.appendChild(title);

                var desc = document.createElement("h6");
                desc.innerText = item.data.text;
                childDiv.appendChild(desc);

                div.appendChild(childDiv);

                return div;

            }
        })
    };
person Martin Beeby    schedule 15.11.2012

arrow_upward
0
arrow_downward

Учитывая доступ к вашим объектам данных (которые, я предполагаю, у вас все еще есть в то время, когда вы хотите это сделать), такой шаблон, как:

<div data-win-control="WinJS.Binding.Template" id="yourTemplate">
    <div data-win-bind="textContent: timestamp"></div>
</div>

В тот момент, когда вы хотите изменить часы на своих элементах, просмотрите их и обновите свойство timestamp, и представление списка будет обновлено. Например.

var item = getItemToUpdateFromSomewhere();
item.timestmap = "2 O'clock";
person Dominic Hopton    schedule 16.11.2012