Question

我正在使用组件的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），除了一个问题。不是执行移动，而是每次标志改变时重新创建子组件，例如，它被摧毁并创造了一个新的。这对我的用例来说很不幸，原因有两个：

子组件具有相当大的创建成本（特别是在移动设备中），因为它执行一些图形工作。
子组件存储一些私有数据（a 对模型所做的更改的历史），或者a）在丢失时丢失它移动到另一个部分或b）必须存储在顶级组件污染了它的数据模型。

所以我想知道的是，有没有办法“移动”组件而不删除/重新创建它？

此致 V.Seguí

Answer 1

是 - 每个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选择器或元素的ID。

这是一个JSFiddle演示：http://jsfiddle.net/rich_harris/Uv8WJ/

您也可以使用内联组件（即<subcomponent/>而非new Subcomponent()执行此操作。在此JSFiddle中，我们使用ractive.findComponent('subcomponent')方法获取对实例的引用：http://jsfiddle.net/rich_harris/f28t5/。

如何移动组件

1 个答案: