Question

使用Ractive即时添加子组件时遇到了一些问题。

我正在制作日程/日历组件，并通过选择一天的间隔来添加新的事件/会议。这就是我需要动态添加子组件的原因。

现在我做这样的事情：

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

这会将组件添加到位，但它不会被识别为子组件，例如点击事件正在＆＃34;父母＆＃34;组件也是如此。那很好（-ish）因为我可以破解一个on-click=cancelEvents虚拟监听器，它只返回false（从而防止冒泡）。不是一个漂亮的解决方案，但它有效。

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

我还尝试使用render和insert放置该组件，但我无法让它工作。

是否有一种理智的方式可以动态添加子组件，但仍然保持父/子关系？

提前致谢！

P.S

这是一个JS小提琴，展示了我对实际行为的期望！ http://jsfiddle.net/noakcjws/1/

Answer 1

以尊重父子关系的方式创建组件的唯一真正方法是使用数据绑定（跳到＆＃39;运行代码段＆＃39;然后点击＆＃39;完整页面＆＃ 39; ...）：

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

显然，对于跨越 x 间隔的事件以及日程安排冲突等，这些都会造成巨大的复杂性，但是无论您采用哪种方法，它们都会突然出现！

RactiveJS即时添加子组件

1 个答案: