gpt4 book ai didi

javascript - RactiveJS 动态添加子组件

转载 作者:行者123 更新时间:2023-11-27 23:58:27 26 4
gpt4 key购买 nike

我在使用 Ractive 动态添加子组件时遇到了一些问题。

我正在制作一个时间表/日历组件,并通过选择一天的时间间隔来添加新的事件/ session 。这就是为什么我需要动态添加子组件。

现在我做这样的事情:

this.on('addEvent', function () {
new CalendarEvent({
el: evt.node
});
});

这会在适当的位置添加组件,但它不会被识别为子组件,因此例如单击事件也在“父”组件上触发。这很好(-ish),因为我可以破解一个 on-click=cancelEvents 虚拟监听器,它只返回 false(从而防止冒泡)。这不是一个完美的解决方案,但它有效。

但是在我的子组件中,我需要知道父组件的高度,但是 this.parentnull 这是一个更大的问题。

我还尝试将组件与 renderinsert 一起放置,但我就是无法让它工作。

是否有一种明智的方法可以动态添加子组件,但仍保持父/子关系?

提前致谢!

附注

这是一个 JS-fiddle,展示了我的期望与实际行为! http://jsfiddle.net/noakcjws/1/

最佳答案

以尊重父子关系的方式创建组件的唯一真正方法是使用数据绑定(bind)(跳到“运行代码片段”,然后点击“完整页面”...):

var ractive = new Ractive({
el: 'main',
template: '#template',
data: {
days: 'monday tuesday wednesday thursday friday'.split( ' ' ).map( function ( name ) {
return { name: name, intervals: makeIntervals() };
})
},
addEvent: function ( day, interval ) {
this.set( 'days[' + day + '].intervals[' + interval + '].event', {
description: 'i am a calendar event'
});
}
});

Ractive.components.CalendarEvent = Ractive.extend({
template: '#calendar-event'
});

function makeIntervals () {
var intervals = [];
for ( var i = 9; i < 17; i += 1 ) {
intervals.push({ start: i, end: i + 1, event: null });
}
return intervals;
}
body, html, main {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.day {
position: relative;
float: left;
width: 20%;
height: 100%;
padding: 4em 0 0 0;
border-right: 2px solid #aaa;
box-sizing: border-box;
}

h2 {
position: absolute;
top: 0;
left: 0;
}

.interval {
position: relative;
width: 100%;
height: 12.5%; /* 100/8 */
border-bottom: 1px solid #eee;
box-sizing: border-box;
}

time {
position: absolute;
top: 0.5em;
left: 0.5em;
color: #eee;
}

.event {
position: absolute;
width: 100%;
height: 100%;
background-color: orange;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<main></main>

<script type='text/html' id='template'>
{{#each days :d}}
<div class='day'>
<h2>{{name}}</h2>

{{#each intervals :i}}
<div class='interval' on-click='addEvent(d,i)'>
<time>{{start}}:00</time>
{{#if event}}
<CalendarEvent event='{{event}}'/>
{{/if}}
</div>
{{/each}}
</div>
{{/each}}
</script>

<script type='text/html' id='calendar-event'>
<div class='event'>
<p>{{event.description}}</p>
</div>
</script>

显然,这消除了跨x个时间间隔的事件以及日程安排冲突等的大量复杂性,但无论您采取哪种方法,它们都会突然出现!

关于javascript - RactiveJS 动态添加子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32053917/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com