Question

是否有可能，以及如何做到这一点，在两个节点上呈现Ractive实例？例如，在表格顶部和底部分页。

index.html会像foollows一样：

...
<div id="mainBigTable">
   <div class="pagination"></div>

   <div id="dataTable"></div>  

   <div class="pagination"></div>
</div>
...

RactiveJS：

var paginationClass = Ractive.extend({
    template: template("paginationClassTemplate");
    init: function() {
        //Some initialization
    }
});

app.js初始化：

paginationInstance = new paginationClass();
return paginationInstance.render("#mainBigTable .pagination");

所以我想在paginationInstance上使用一个<div class="pagination"></div>。

是否有可能以及如何实现这一目标？

谢谢！

Answer 1

您不能在2个地方使用一个实例。即使普通的DOM元素也不能这样做（如果您尝试将页面上的现有DOM元素附加到另一个DOM元素中，它将从原始位置移除并呈现给目标）。

您始终可以为第二个分页组件创建单独的实例。为了使两个分页组件保持同步，您需要将数据提取到其他位置。您可以使用模型或可侦听对象或父组件来存储分页数据，以便两个组件都可以监听数据更改。

以下是包含两个分页实例的父组件的示例：

<script type="template/ractive" id="template-parent">
  <div id="mainBigTable">
   <pagination currentPage="{{currentPage}}" pages="{{pages}}" />
   <div id="dataTable"></div>  
   <pagination currentPage="{{currentPage}}" pages="{{pages}}" />
  </div>
</script>

<script>
// So here we define a "parent" component that houses your pagination as
// it's components. In the template above, you see a custom element named
// after the component. It receives currentPage and pages from BigTable
var BigTable = Ractive.extend({
  template: '#template-parent',
  data: {
    // Defaults
    currentPage: 0,
    pages: 0,
  },
  components: {
    pagination: paginationClass
  }
});

// Now you treat bigTable as an instance too!
var bigTable = new BigTable({
  el: 'somewhere-in-your-page',
});

// Now all you need to do is change bigTable's data and it will
// trickle down to both pagination components
bigTable.set('currentPage', 3);
</script>

RactiveJS：在两个节点上渲染元素

1 个答案: