動態加載/重新加載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時間軸上的綁定數據

回答

相關問題