Метеор и CSS-преобразования

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

someDOMElement.webkitTransform = "translate(" + x + "px," + y + "px," + z + "px)";

Потом я вспомнил про шаблоны и подумал, что хороший чит будет

{{#with object}}
    <someTag style="-webkit-transform: translate( {{x}}px, {{y}}px, {{z}}px )">

А потом в метеор

Template.someTemplate.object = function() {
    someDep.depend();
    return someObj;
};

Наконец, чтобы перерисовать после изменения объекта, мне просто нужно было бы позвонить

someDep.changed();

Здесь две проблемы

  1. Количество строк увеличено.
  2. Эффективно ли Meteor справляется с этими небольшими изменениями в DOM?

Кто-нибудь слышал о полимере? Их двусторонняя привязка данных кажется идеальной для этого, я слышал, что они могут обнаруживать изменения в объектах и ​​отражать их в DOM, поэтому в идеале вы могли бы, в терминах Meteor, просто сделать что-то вроде:

Template.someTemplate.object = someObj;

Депс не нужен.

Заранее спасибо!


css dom meteor polymer
person Cristian Garcia    schedule 03.05.2014    source источник
comment
Независимо от количества строк, поскольку обновления DOM в Meteor 0.8.0 минимальны и эффективны (по крайней мере, ваши примеры будут оптимизированы).   -  person imslavko    schedule 03.05.2014
comment
Думаю, я сам проведу тест, чтобы сравнить необработанный метод с обновлениями DOM метеоров.   -  person Cristian Garcia    schedule 03.05.2014
comment
@christian-garcia Если вы все еще заинтересованы в использовании полимерных элементов в метеоре, ознакомьтесь с моим пакетом, чтобы сделать это. github.com/ecwyne/meteor-polymer   -  person ECWyne    schedule 25.07.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вам, вероятно, не нужно беспокоиться о низкоуровневом интерфейсе Deps (например, depend и changed), если только вы не пишете какую-то библиотеку или что-то действительно сложное. Метеор имеет два очень универсальных реактивных источника общего назначения: Session и Collection.

Для простых задач вы можете использовать Session:

Template.someTemplate.object = function() {
    return Session.get("user.location");
};

И когда что-то меняется

Session.set("user.location", {x:4, y:12, z:5});

Вы можете использовать тот же объект и переустановить его:

obj = {x:4, y:12, z:5}
Session.set("user.location", obj);
obj.z = 25;
Session.set("user.location", obj);

При обоих вызовах метода set Meteor будет обновлять DOM.

Если у вас есть более сложные структуры данных, вы можете использовать Meteor.Collection и курсоры, которые также автоматически запускают пересчет и обновление DOM. См. пример кода таблицы лидеров.

(Кстати, если у вас есть 3 координаты, вам, вероятно, нужно translate3d() вместо translate())

person Bernát    schedule 03.05.2014

arrow_upward
0
arrow_downward

Связывать данные так, как вы пытаетесь их связать, может быть, не лучший способ получить приятный пользовательский интерфейс. Я вижу привязку данных как удивительную вещь для «фактических» данных (время, имя, место...). Но для пользовательского интерфейса способ, которым мы до сих пор создавали веб-приложения, кажется все еще эффективным.

Вам следует рассмотреть возможность использования чего-то вроде greensock (https://atmospherejs.com/package/gsap).

Когда ваши данные изменяются, вы начинаете анимацию с to(), и все. (или вы устанавливаете свойства с помощью set()).

Meteor никогда не будет использовать тонкую оптимизацию, такую ​​как кадр анимации запроса, для обновления DOM. Вот почему мы используем gs (или известный в будущем), чтобы справиться с такими вещами. (https://github.com/percolatestudio/meteor-famous-demos)

person fabien    schedule 07.05.2014