动态加载/重新加载Ember时间轴上的绑定数据

我正在使用Ember Timetree代码（Timetree），我认为它很棒。我是Ember和D3的新手，因此跳入Timetree代码让我头疼。我想添加功能，以便如果用户单击页面上的按钮，时间树将重新加载不同的数据。我一直在尝试一段时间，但似乎没有任何工作。以下是我有：动态加载/重新加载Ember时间轴上的绑定数据

灰烬模板的timetree：

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

HTML定义timetree格：

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

谢谢。

马歇尔

来源

2014-03-06 Marshall3389664

我找到了答案。首先，我添加了一个的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); 
    } 
    } 

}

然后，我在我看来，以处理更新的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。

来源

2014-04-02 18:40:06 Marshall3389664

问题可能是你没有做的事情灰烬方式 - 这是非常不同的，但真棒。在灰烬按钮将典型地被定义为

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

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

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

来源

2014-03-08 02:10:55 TrevTheDev

谢谢。这为我的问题提供了更多的信息。实际上，我有一个Primefaces应用程序，并且通过Primefaces推送事件调用javascript函数，所以没有用户交互和没有按钮。我会寻找一种方法，在没有用户交互的情况下调用{{action'loadNewTimeTree'}}。再次感谢。 – Marshall3389664

如果您想使用ember来自动化操作，请查看[run loop]（http://emberjs.com/api/classes/Ember.run.html），它也允许代码定期运行。 – TrevTheDev

动态加载/重新加载Ember时间轴上的绑定数据

回答

相关问题