装载NG-包括本地pre加载(JST)模板缓存谐音谐音、缓存、加载、模板

由网友(那时年少)分享简介:我有我的模板pre装在JavaScript字符串数组,如 VAR T = JST ['firstTemplate'] ,其中 ŧ会是什么样子,I have my template pre-loaded in a javascript string array, like var t = JST['firstTempl...

我有我的模板pre装在JavaScript字符串数组,如 VAR T = JST ['firstTemplate'] ,其中 ŧ会是什么样子,

I have my template pre-loaded in a javascript string array, like var t = JST['firstTemplate'], where t would be like,

<div>This scope has a value of {{value}}</div>

我如何使用这个pre装模板在 NG-包括指令?

请注意,我的在这种情况下模板可以是更复杂的,具有可能的嵌套视图和模板和自身嵌套范围和控制器。所以,我不知道是否有任何NG绑定指令将帮助?

Note that my template in this scenario can be more complex, with possible nested view and templates and their own nested scopes and controllers. So I am not sure if any of the ng-bind directives would help?

更新:

综观源 NG-包括看来做一个很好的办法是去耦模板加载逻辑放到一个可定制的提供者。

Looking at the source of ng-include it appears that a good way to do this would be to decouple the template loading logic into a customizable provider.

当前默认加载机制只是做了 $ http.get $ templateCache 作为缓存提供者。好像我可以注入我的模板内容JST ['firstTemplate'] 到模板缓存,但我不得不这样做,在启动的时候,每一个模板。

The current default loading mechanism simply does a $http.get with $templateCache as the cache provider. It seems like I can inject my template content in JST['firstTemplate'] into the template cache, but I'd have to do that at startup time, for every template.

$templateCache.put('firstTemplate', JST['firstTemplate']);

再有,

<div ng-include="firstTemplate"></div>

我也可以写去并排每NG-包括以某种方式做模板此pre-缓存自定义指令。这似乎又笨重。

I could also write a custom directive that goes side-by side with every ng-include, that somehow does this pre-caching of templates. That again seem clunky.

更新#2

我要去尝试重写templateCache,以便它使用我已经pre-JST装散。会后的结果,如果这个工程。

I'm going to try overriding the templateCache, so that it uses my already pre-loaded JST hash. Will post the results if this works.

推荐答案

下面是我找到工作的解决方案,就像我先前想(以上:-)基本上,装点$ templateCache.get方法,它不是黑客攻击使用标准的$ provide.decorator使缓存得到看在我的本地pre加载缓存。这只是工作。

Here is the solution I found to work, and it's not a hack like I was thinking earlier (above :-) Basically, decorate the $templateCache.get method using standard $provide.decorator so that cache gets look in my local pre-loaded cache. It just works.

angular.module('app').config([
  '$provide', 
  function($provide) {
    $provide.decorator('$templateCache', function($delegate, $sniffer) {
      var originalGet = $delegate.get;

      $delegate.get = function(key) {
        var value;
        value = originalGet(key);
        if (!value) {
          // JST is where my partials and other templates are stored
          // If not already found in the cache, look there...
          value = JST[key]();
          if (value) {
            $delegate.put(key, value);
          }
        }
        return value;
      };

      return $delegate;
    });

    return this;
  }
]);

如果你想知道为什么我有这个东西在JST,我们使用了导轨后端与铁轨资产管道提供所有角度的资产。该JST模板,让我们所有的捆绑模板和初始化过程中加载到应用程序,并避免取谐音和其他模板内容时,通常需要额外的服务器往返。

If you're wondering why I have this stuff in JST, we use a rails backend and the rails asset pipeline to deliver all angular assets. The JST templates allow us to bundle all templates and load them into the app during initialization, and avoid additional server roundtrips that are normally required when fetching partials and other template content.

以上的补丁,使所有这些作品具有角。

The above patch makes all of this works with angular.

阅读全文

相关推荐

最新文章