在Ember中異步加載部分視圖

我創建了一個Ember幫助程序，允許從服務器上的URL加載動態生成的部分視圖。它看起來像這樣：在Ember中異步加載部分視圖

Ember.Handlebars.helper('serverPartial', function(url, options) { 
    var template; 

    $.ajax(url, { 
     async: false, 
     success: function(templateText){ 
      template = Ember.Handlebars.compile(templateText); 
     } 
    }); 

    template(this, options); 
});

而且它是從這樣的家長把手模板稱爲：

{{serverPartial templateUrl}}

正如你所看到的，Ajax調用來檢索服務器的模板是同步調用，因爲我找不到任何其他方式來按照Ember框架的預期返回模板內容。不幸的是，這個同步調用阻止了整個父模板的渲染。

有沒有辦法爲模板返回一個承諾，或者有任何其他方式來允許部分視圖異步或獨立加載？

來源

2014-04-08 jdmcnair

爲什麼你需要做一個同步ajax調用？ – Hrishi

我想呈現服務器上的一些模板，因爲我的Web應用程序使用服務器端MVC框架呈現的重要部分，我還沒有準備好重寫所有這些。 – jdmcnair

感謝您的提示，@Rajat。我確實使用Views來完成此操作。我創建了一個最初加載默認子模板的視圖容器，然後該子代在插入後從服務器加載實際內容。下面是我採取的方法：

App.LoadingView = Ember.View.extend({ 
    didInsertElement: function(){ 
     var container = this._parentView; 
     $.get('http://server/serverTemplate', function(data){ 
      container.pushObject(Ember.View.create({ 
       template: Ember.Handlebars.compile(data) 
      })); 
      container.removeObject(container.get('loadingView')); 
     }); 
    }, 
    template: Ember.Handlebars.compile('client awesome') 
}); 

// inherit from ContainerView and initialize with default content 
App.SnippetView = Ember.ContainerView.extend({ 
    childViews: ['loadingView'], 
    loadingView: App.LoadingView.create() 
});

我敢肯定有更好的方式來表達這一點，但做這項工作在最低限度。

來源

2014-04-15 13:33:27 jdmcnair

首先，你正在試圖用Handlebars助手做什麼並不是他們打算做的。把手助手是嚴格的標記格式化程序，應該用於簡單的HTML調整。

其次，在典型的餘燼應用程序中，你試圖做的事是從來沒有完成的。沒有按需提取模板。

這是因爲當應用程序加載並在客戶端上運行時，所有模板都會以一次掃描下載。它們預編譯爲JavaScript函數，並存儲爲Strings中的Ember.Handlebars散列。

它們在應用程序加載時下載，然後在渲染視圖時進行評估。與此同時，他們簡單地生活在Strings。

現在，如果你仍然想要做你正在做的事情，我會建議在Views這樣做。

來源

2014-04-08 05:54:26 Rajat

謝謝！對於它的價值，它看起來像Ember核心中支持的路線圖上的服務器端模板渲染*（http://tomdale.net/2013/09/maybe-progressive-enhancement-is-the-wrong -term /），所以我的使用情況不能完全不符合標準。您是否有任何建議或參考資料介紹如何使用Views實現此功能？ – jdmcnair

在Ember中異步加載部分視圖

回答

相關問題