RactiveJS:在两个节点上渲染元素
RactiveJS: Render element on two nodes
是否可以在两个节点上呈现 Ractive 实例,以及如何做到这一点?例如,分页在 table 顶部和底部
index.html 会像傻瓜一样:
...
<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");
所以我想在两个 <div class="pagination"></div>
上使用一个 paginationInstance
。
是否可能以及如何实现?
谢谢!
您不能在 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>
是否可以在两个节点上呈现 Ractive 实例,以及如何做到这一点?例如,分页在 table 顶部和底部
index.html 会像傻瓜一样:
...
<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");
所以我想在两个 <div class="pagination"></div>
上使用一个 paginationInstance
。
是否可能以及如何实现?
谢谢!
您不能在 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>