0

phonegap、backbone.js、coffeescriptを使用してモバイルアプリケーションを構築しようとしています。私はこのようなことをしたい：

class MyApplication.Views.EntriesIndex extends Backbone.View
  template: load('my/template') //It will load the external file my/template.tpl

  render: ->
    $(@el).html(@template())
    this

同期してロードしたい。私はすでにrequire.jsを見ましたが、この単純な考えには複雑すぎることがわかりました。RailsアプリケーションにJSTを使用できることはわかりましたが、スプロケットなしでJSTを使用する方法がわからず、アプリケーションはクライアント側でのみ動作する必要があります。

テンプレートを同期的にロードするためのより良い方法は何ですか？

プリロードする方がいいと思います。

私のアプリケーションはクライアント側でホストされます。

4

3 に答える 3

1

テンプレートを次のようにロードします。

         $.ajax({
            url     : 'my/template.tpl',
            async   : false,
            success : function(tpl) {
                //do something with the template
            }
        });

多分それはあなたのためにも働く解決策です..

于 2012-10-10T06:16:53.330 に答える
1

これは私がしました ：

class HomeView extends Backbone.View
  template: ->
    template = "views/home.html"
    cache = window.templates[template]
    return cache if cache

    cache = $.ajax(
      url: "views/home.html"
      async: false).responseText

    window.templates[template] = cache
    return cache

  render: ->
    @$el.html(@template())

そして、私のアプリケーションの初期化では：

window.templates = {}

したがって、テンプレートを非同期でロードしてキャッシュすることができます。明らかに、私はいくつかのリファクタリングを行い、おそらくそれをJQuery関数に配置します。

あなたの助けをありがとう。

編集

これを行うためにコードを変更します：

class Loader
  @files: {}
  @load: (path) ->
    return @files[path] ||= $.ajax(url: path, async: false).responseText

今、私はこれを行うことができます：

class HomeView extends Backbone.View
  template: ->
    Loader.load("views/home.html")

  render: ->
    @$el.html(@template())

これはjavascriptのバージョンです：

var Loader;

Loader = (function() {

  function Loader() {}

  Loader.files = {};

  Loader.load = function(path) {
    var _base;
    return (_base = this.files)[path] || (_base[path] = $.ajax({
      url: path,
      async: false
    }).responseText);
  };

  return Loader;

})();

私はおそらくgithubでコードを公開します...

于 2012-10-10T10:35:35.010 に答える
0

アプリケーションがphonegapアプリとして実行されている場合は、テンプレートをHTMLに含めることもできます。

<script type = "text / template"> ...</script>の説明

于 2012-10-09T20:22:01.063 に答える