Как да местите компоненти

Използвам клона 0.4.0 за функционалността на компонентите като HTML файлове. Опитвам се да направя следното: Имам компонент, който контролира оформлението на страница. Този компонент има някои подкомпоненти като масив и ги показва в различни части на страницата въз основа на някои данни в подкомпонента. Нещо подобно на това (поради ограничения на оформлението те трябва да са в различни части на страницата):

<div id="section1"> 
     <h1> Section 1 </h1>
    {{# subcomponents}}
       {{#isflagsection1(flag)}}
         <subcomponent flag={{flag}}/>
       {{/isflag}}
     {{/subcomponents}}
</div>

<div id="section2"> 
     <h1> Section 2 </h1>
    {{# subcomponents}}
        {{#isflagsection2(flag)}}
            <subcomponent flag={{flag}}/>
        {{/isflag}}
    {{/subcomponents}}
</div>
<div id="section3"> 
    <h1> Section 3 </h1>
    {{# subcomponents}}
        {{#isflagsection3(flag)}}
          <subcomponent flag={{flag}}/>
        {{/isflag}}
     {{/subcomponents}}
</div>

Флагът се актуализира от контролите във всеки компонент. това работи чудесно (DOM се опреснява всеки път, когато променям флага), с изключение на един проблем. Вместо да извършва движение, подкомпонентът се създава отново всеки път, когато флагът се промени, напр. той е унищожен и е създаден нов. Това е жалко за моя случай на употреба поради две причини:

  1. Подкомпонентът има доста високи разходи за създаване (особено в мобилни устройства), тъй като изпълнява известна графична работа.
  2. Подкомпонентът съхранява някои частни данни (хронология на промените, направени в модела), които или а) се губят, когато се преместят в друга секция, или б) трябва да се съхраняват в най-горния компонент, замърсявайки неговия модел на данни.

И така, това, което бих искал да знам, е има ли начин да „преместя“ компонента, без да го изтривам/създавам отново?

Поздрави, V. Seguí


ractivejs
person vseguip    schedule 28.02.2014    source източник

Отговори (1)


arrow_upward
3
arrow_downward

Да – всеки екземпляр на Ractive има два метода, които ви позволяват да направите това: ractive.detach() и ractive.insert(). За съжаление в момента липсва документация, но ето как да я използвате:

// remove the instance from the DOM, and store a document
// fragment with the contents
docFrag = ractive.detach();

// insert the instance into the container element, immediately
// before nodeToInsertBefore (the second argument is optional -
// if absent or `null` it means 'insert at end of container'
ractive.insert( container, nodeToInsertBefore );

Ако премахвате екземпляра и веднага го вмъквате отново, няма нужда първо да го отделяте - можете просто да направите ractive.insert(). Аргументите могат да бъдат DOM възли, но могат също да бъдат CSS селектори или идентификатори на елементи.

Ето един JSFiddle, който демонстрира: http://jsfiddle.net/rich_harris/Uv8WJ/

Можете също да направите това с вградени компоненти (т.е. <subcomponent/> за разлика от new Subcomponent(). В този JSFiddle използваме метод ractive.findComponent('subcomponent'), за да получим препратка към екземпляра: http://jsfiddle.net/rich_harris/f28t5/.

person Rich Harris    schedule 28.02.2014
comment
Здравей Рич, благодаря за отговора. Надявах се на по-декларативен подход, тъй като имам куп подкомпоненти и трябва да ги преместя въз основа на данните на подкомпонента. Това означава, че родителският компонент ще трябва да слуша промените в данните на подкомпонентите и да действа съответно. Аз съм нуб на Ractive.js (или изобщо на уеб програмирането), но мисля, че може да бъде достатъчно общо, за да стане компонент или плъгин, като LayoutManager. Какво мислиш? - person vseguip; 28.02.2014
comment
Това е интересна мисъл. Не е веднага очевидно как може да се обобщи, но определено съм отворен за идеята. Така че вероятно не е най-доброто място за обсъждане как може да се приложи - може би отворете проблем в GitHub? Това леко напомня на #422, въпреки че идва от различен ъгъл. Благодаря - person Rich Harris; 28.02.2014
comment
Имате ли нещо против да отворя нова тема? Имам чувството, че #422 се опитва да постигне твърде много на едно място (маршрутизиране, управление на изгледи и т.н.). - person vseguip; 28.02.2014