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>

定义timetree 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链接到timetree的内容是什么？

感谢。

马歇尔

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更新时间轴。

Answer 2

问题可能是你没有按照Ember的方式做事 - 这是非常不同但很棒的。在Ember中，按钮通常定义为

<button {{action 'loadNewTimeTree'}}>Reload</button>

然后在你的视图或控制器中，将有一个loadNewTimeTree的动作处理程序。通常是将数据加载到ember模型中。

App.IndexView = Ember.View.extend({
   actions: {
       loadNewTimeTree: function () {
           var newJsonData = .... //Get the JSON data or more typical
           this.get('controller.model').reload(); //typically JSON handled by RESTAdapter
        }
    }
});

如果你想学习可能具有挑战性的余烬方式，我建议你去研究他们的website

在Ember时间线上动态加载/重新加载绑定数据

2 个答案: