Ich versuche, eine mobile Anwendung mit phonegap, backbone.js und coffeescript zu erstellen. Ich möchte so etwas machen:

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

Ich möchte es synchron laden. Ich habe require.js bereits gesehen, aber ich finde es zu kompliziert für dieses einfache Denken. Ich habe gesehen, dass ich JST für eine Rails-Anwendung verwenden kann, aber ich finde nicht, wie ich es ohne Kettenrad verwenden kann, und meine Anwendung muss nur auf der Clientseite funktionieren.

Was ist der bessere Weg, um Vorlagen synchron zu laden?

Ich denke, das ist besser, es vorzuladen.

Meine Anwendung wird auf der Clientseite gehostet.

0
Dougui 9 Okt. 2012 im 23:31

3 Antworten

Beste Antwort

Ich war das :

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

Und in meiner Anwendungsinitialisierung:

window.templates = {}

So kann ich die Vorlage asynchron laden und zwischenspeichern. Natürlich werde ich einige Umgestaltungen vornehmen und sie möglicherweise in eine JQuery-Funktion einfügen.

Vielen Dank für Ihre Hilfe.

Bearbeiten

Ich ändere meinen Code, um dies zu tun:

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

Jetzt kann ich das machen:

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

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

Dies ist die Javascript-Version:

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;

})();

Ich werde den Code wahrscheinlich auf Github veröffentlichen ...

1
Dougui 10 Okt. 2012 im 15:16

Ich lade meine Vorlagen folgendermaßen:

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

Vielleicht ist es eine Lösung, die auch für Sie funktioniert.

1
Moszeed 10 Okt. 2012 im 06:16

Wenn Ihre Anwendung als Phonegap-App ausgeführt wird, können Sie Ihre Vorlagen auch in den HTML-Code aufnehmen:

Erläuterung von

0
Community 23 Mai 2017 im 11:43