2016-05-12 2 views
1

Мне нужно настроить поведение полимерного веб-компонента во время выполнения. Я попытался изменить массив «behaviors», нажав новое поведение, но это не сработало. Есть ли правильный способ сделать это?Полимер: зарегистрируйте поведение во время выполнения

Я пытаюсь создать веб-компонент таблицы с пейджером внизу. Он должен быть расширяемым, позволяя загружать данные из массива javascript, восстанавливаемого сервиса или настраиваемого источника. Таким образом, я решил создать поведение для каждого из этих источников и изменить его при изменении источника. Правильно ли это спроектировать?

Здесь приведен пример the source code поведения для загрузки данных из массива. Он выполняет следующие функции:

itemsLoad: function(page, itemsPerPage, callback) {... 

, который вызывается из веб-компонента для загрузки данных определенной страницы. Моя идея заключается в том, что каждое поведение, основанное на типе источника данных (например, CSV, JSON и т. Д.), Будет применять этот метод по-другому. Затем поведение будет зарегистрировано во время выполнения, потому что во время выполнения разработчики знают, какой источник использовать.

ответ

1

Я не думаю, что вы сможете изменить поведение во время выполнения, потому что они смешиваются с прототипом элемента.

Что вы можете сделать, это создать отдельный элемент для каждого из ваших случаев (csv, json и т. Д.) И динамически создавать узлы по мере необходимости. Вы могли бы, чем поместить этот элемент внутри сетки

<table-component> 
    <json-data-source></json-data-source> 
</table-component> 

<table-component> будет выглядеть для дочернего элемента, который реализует itemsLoad, чтобы получить данные.

EDIT

Для работы с дочерними узлами вы могли бы использовать Polymer's DOM API. Например, вы можете прослушивать добавленные дочерние узлы и выбрать тот, который реализует метод itemsLoad.

Polymer({ 
    attached: function() { 
    Polymer.dom(this).observeNodes(function(info) { 
     var newNodes = info.addedNodes; 

     for(var i=0; i<newNodes.length; i++) { 
     var dataSource = newNodes[i]; 

     if(dataSource.itemsLoad && typeof dataSource.itemsLoad === 'function') { 
      this.loadItems(dataSource); 
      break; 
     } 
     } 
    }); 
    } 

    loadItems: function(dataSource) { 
    dataSource.itemsLoad().then(...); 
    } 
}); 

Вы могли бы заменить Polymer.dom(this).observeNodes с просто итерации над Polymer.dom(this).children. Что лучше всего подходит для вас.

+0

Спасибо за ваш ответ. Как я могу найти дочерний элемент и определить, реализует ли он itemsLoad? –

+0

С Polymer это почти похоже на обычную манипуляцию DOM. И проверить, реализует ли элемент функцию? Проверьте, существует ли он. См. Обновленный ответ –

Смежные вопросы