javascript - 在 Ember 时间轴上动态加载/重新加载绑定(bind)数据

Question

我正在使用 Ember Timetree 代码 ( Timetree )，我认为它很棒。我是 Ember 和 D3 的新手，所以跳入 Timetree 代码让我头疼。 我正在尝试添加功能，以便如果用户单击页面上的按钮，时间树将重新加载不同的数据。我已经尝试了一段时间但似乎没有任何效果。 这是我所拥有的:

时间树的 Ember 模板:

<script type="text/x-handlebars" data-template-name="index">
  <div class="example">
    {{view Ember.Timetree.TimetreeView contentBinding="App.ApiData" selectionBinding="selectedEvents" rangeBinding="eventsRange_example2"}}
  </div>  
</script>

定义时间树 div 的 HTML:

<div id="app"></div>

用户单击的按钮的 HTML:

<button type="button" onclick="loadNewTimetree()">Reload</button>

用于重新加载时间树的函数的Javascript:

function loadNewTimetree() {
  var newJsonData = .... Get the JSON data
  // Replace the existing JSON data with the newJsonData and re-draw the timeline - how? 
 }

我缺少将更新的 JSON 链接到时间树的部分是什么？

谢谢。

编码(marshal)

Answer 1

我找到了答案。 首先，我在模板中添加了一个 viewName="mmView" 标签:

<script type="text/x-handlebars" data-template-name="index">
  <div class="example">
    {{view Custom.Timetree.TimetreeView viewName="mmView" contentBinding="App.ApiData" selectionBinding="selectedEvents" rangeBinding="eventsRange_example2"}}
  </div>  
</script>

我找到了答案的核心here 。所以我更新了我的 javascript 函数:

function loadNewTimetree() {
  var newJsonData = .... Get the JSON data
  // View.views returns a hashtable. Key is the id, value if the View.
  var views = Ember.View.views;

  for (var nextKey in views) {
    var nextView = views[nextKey];
    // The 'viewName' is set in the template and needs to be unique for each timeline.
    if (nextView.viewName && nextView.viewName == 'mmView')
    {
        nextView.reloadWithNewData(newJsonData );
    }
  }

 }

然后我在 View 中添加了一个函数来处理更新的 JSON:

Custom.Timetree.TimetreeView = Ember.Timetree.TimetreeView.extend(
{
... Other attributes,
 reloadWithNewData:function (newTimelineJson) 
 {
   // Need to clear out the svg contents before adding the new content
   // or else you get strange behavior.
   var thisSvg = this.get('svg');
   thisSvg.text('');
   this.set('content', newTimelineJson);
   this.didInsertElement();
}
});

因此，当我调用 loadNewTimetree() 函数时，它会使用新的 JSON 更新时间线。