Что делает Flex, который делает [Связываемый] тег?

Мне не удалось решить проблему с помощью таблицы, поэтому я решил свою проблему с помощью divs. Я отслеживал случайную высоту div-ов на каждой странице и назначал оставшееся место для нижнего колонтитула. У моих нижних колонтитулов есть ограничение минимальной высоты, чтобы на каждой странице был нижний колонтитул. Содержимое каждой страницы помещается в другой раздел, чтобы дать мне больше контроля над стилем каждой страницы; например: разрыв страницы после переполнения и . Решение не идеальное и надеюсь, что кто-то придет с лучшим подходом, но оно удовлетворяет мою потребность на данный момент. Ниже вы можете найти обновленный код:

const main = document.getElementById("main");
const newDiv = document.createElement("div");
const paperHeight = 11 // paper height in inch
const paperMargin = 1; // sum of top and bottom paper margins in inch
const overflow = 0.11; // used to protect page overflow to the next page
const dpi = 96; // Display dots per inch (DPI)
const maxHeight = (paperHeight - paperMargin) * dpi; // max page height
const footerMinHeight = 40; // Min height of footer
const headerHeight = 100; // Height of header in px
const numOfItems = 20; // Number of items

let j = 0;
let items = '';
let pageCount = 1;
do {
  items += `<div class="page" style="max-height: ${paperHeight - paperMargin - overflow}in"><div class="box header" style="height: ${headerHeight}px">Page ${pageCount} - Header</div>`;
  let pageHeight = headerHeight;
  do {
    const elementHeight = getRandomIntInclusive(60, 250);
    if (elementHeight + pageHeight > maxHeight - footerMinHeight || j === numOfItems) {
      items += `<div class="box footer" style="height: ${maxHeight - pageHeight}px">Footer</div></div>`;
      break;
    } else {
      pageHeight += elementHeight;
      j++;
    }
    items += `<div class="box" style="height: ${elementHeight}px">Item ${j} </div>`;
  } while (j <= numOfItems)
  pageCount++;
} while (j < numOfItems)
newDiv.innerHTML = items;
main.appendChild(newDiv);



document.getElementById("print").addEventListener("click", () => {
  window.print();
});

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
* {
  box-sizing: border-box;
}

.page {
  border: 1px dashed green;
  page-break-after: always;
  overflow: hidden;
}

.box {
  border-bottom: 1px solid red;
}

.header {
  background: #e6ffe6
}

.footer {
  background: #fdfed6;
}

@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
  #print {
    display: none;
  }
}
<button id='print'>Print</button>
<div id='main'></div>

6
задан SkunkSpinner 12 January 2009 в 14:14
поделиться

5 ответов

Это - вероятно, излишество, но если Вы действительно интересуетесь тем, что происходит под капотом, когда Вы добавляете [Связываемый] тег, я настоятельно рекомендую проверить Дайвинг Michael Labriola в Привязке данных сессия Waters от 360|Flex! Сан-Хосе. Это - безусловно самая всесторонняя презентация этого предмета, который Вы найдете.

Для просмотра его, необходимо будет загрузить Adobe Media Player (который работает на Adobe Air). Если Вы имеете проблемы при подписке на 360|Flex сессии в Adobe Media Player, следуете совету Ted Patrick от его сообщения в блоге.

Его презентация находится также на Slideshare, но это нигде не рядом как информативное или интересное.

11
ответ дан 8 December 2019 в 13:03
поделиться

Глава 7 Руководства разработчика имеет дело точно с этим. Я предполагаю, что Вы читаете его.

Выборка:

Хотя объекты необработанных данных, такие как Массив строк или объекты, перенесены в наборы, когда Вы используете их в качестве значения dataProvider свойства, использование наборов явно является лучшей практикой. Используя наборы явно гарантирует синхронизацию данных и обеспечивает и более простой и более сложный доступ к данным и инструменты управления, чем доступны, когда Вы используете необработанные объекты непосредственно в качестве поставщиков данных. Наборы могут также обеспечить последовательный интерфейс для доступа и управления данными различных типов.

См. также это о привязке данных и массивах

3
ответ дан 8 December 2019 в 13:03
поделиться

это зависело бы от того, что Вы сделали к данным. Вы применяли фильтр, раз так необходимо ли будет обновить данные. Вы делали вид, раз так необходимо ли будет обновить данные. Ваш dataProvider Массив, раз так это не делает привязки, использует ArrayCollection.

Дайте нам пример того, что это, это не обновляет, и мы должны смочь дать справку specifc.

2
ответ дан 8 December 2019 в 13:03
поделиться

"Когда свойство является источником выражения привязки данных, Flex автоматически копирует значение исходного свойства к любому целевому свойству, когда исходное свойство изменяется. Для передачи сигналов к Flex для выполнения копии необходимо использовать [Связываемый] тег метаданных для регистрации свойства в Flex, и исходное свойство должно диспетчеризировать событие".

1
ответ дан 8 December 2019 в 13:03
поделиться

Если Вы в вожение с компилятором командной строки, можно использовать compile.keep-generated-actionscript флаг для наблюдения эффекта добавления [Bindable] к свойству. Создайте простой actionscript класс, названный тестом, и добавьте, что единственное связываемое свойство строки к нему затем компилирует его как это:

mxmlc -compiler.keep-generated-actionscript test.as

Это создаст папку, названную "сгенерированной" содержащий весь дополнительный сценарий действия, который в этом случае был бы единственным файлом, названным (вероятно), "_test-binding-generated.as".

Необходимо смочь видеть от этого, что добавление связываемого тега просто создает обертку, которая реализует IEventDispatcher и диспетчеризирует событие, когда метод set называют. Именно эта обертка Ваш компонент будет слушать.

Если Ваш компонент сразу не отражает изменение в своем дисплее, это могло бы означать, что необходимо будет изучить код перерисовки того компонента. Древовидное управление довольно известно за этот вид проблемы, главным образом потому что обновление может быть дорогим.

1
ответ дан 8 December 2019 в 13:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: