1

どのプロジェクトでもそうであるように、メインの HTML ファイルの 90% は、次のようにさまざまなテンプレートで構成されています。

<script type="text/template" id="template-parametros">
  <div id="parametros">
    <h2>Parâmetros</h2>
    <table id="tab-parametros">
      <tr><td>Descrição</td><td>Tipo</td><td>Locale</td></tr>
    </table>
    <button id="parametros-ad">Adicionar</button>
  </div>
</script>

UX担当者が自分で作業できるように、それらを別の場所に配置したいと思います. それらを別のファイルに入れるのは簡単ですが、後でインポートするにはどうすればよいですか? 試してみましたが、ブラウザはそれを JavaScript コードとして解釈しようとしましたが、もちろん失敗しました。type="text" も失敗します。何か案が？

ありがとうございました！

4

2 に答える 2

2

テキストプラグインを備えたモジュールローダー（requireJS）を使用しています。テンプレートファイルを引数として定義し、バックボーンビュー内で使用できます。

requireのあるバックボーンビューは次のようになります。

define([
    'jquery',
    'underscore',
    'backbone',
    'text!/templates/templateFileName.html'  // Define the template using text! plugin
], function($, _, Backbone, myTemplate) {  // Include the template as an argument
    "use strict";

    ViewName = Backbone.View.extend({
        template: _.template(myTemplate),  // Setup my template (underscore)
        events: {
            ...
        },
        initialize: function() {
            ...     
        },
        render: function() {
            $(this.el).html(this.template()); // render the template
            return this;
        }
    });

    return ViewName;
});

これに追加するには、アンダースコアを使用すると、_.template()値を簡単に補間できます。

私のtemplateFileName.htmlが次のようになっているとしましょう

<section>
    <div>
        <%= name %>
    </div>
    <div>
        <%= age %>
    </div>
</section>

あなたがしなければならないのは、htmlを設定するためにそれらのプロパティ名でハッシュを渡すことです。

var myHash = {"name":"Felix", "age":"9"};

$(this.el).html(this.template(myHash));
于 2012-08-16T01:29:55.560 に答える
0

どうですか：

if (!async) async = false;
$.ajax({
    async: async,
    url: '/template/' + templateId,
    dataType: 'json',
    success: function(response) {
        $('body').append(response.content);
    }
});
于 2012-08-17T01:29:46.157 に答える