11

私はこのようなバックボーンモデルを持っています

var PeopleModel = Backbone.Model.extend({
defaults: {              
    "people": [
          { "username": "alan", "firstName": "Alan", "lastName": "Johnson", "phone": "1111", "email": "alan@test.com" },
          { "username": "allison", firstName: "Allison", "lastName": "House", "phone": "2222", "email": "allison@test.com" },
          { "username": "ryan", "firstName": "Ryan", "lastName": "Carson", "phone": "3333", "email": "ryan@test.com" },
          { "username": "ed", "firstName": "Edward", "lastName": "Feild", "phone": "4444", "email": "ed@test.com" },
          { "username": "phil", "firstName": "Philip", "lastName": "Doom", "phone": "5555", "email": "phil@test.com" },
          { "username": "gerald", "firstName": "Gerald", "lastName": "Butler", "phone": "6666", "email": "gerald@test.com" }
    ],
    "company": {"name": "Random Corp."},
    "country": "England"
}

});

そして以下は私のテンプレートです

<script id="people-template" type="text/x-handlebars-template">
{{#each people}}
  {{> person}}
{{/each}}
</script>

<script id="person-partial" type="text/x-handlebars-template">
 <div class="person">
    <h2>{{fullName}} </h2>
    <div class="phone">{{phone}}</div>
   <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>    
 </div>

これは、handlebars.jsを使用して部分的に実装した方法です。

私の質問

1.似たようなものがありますか？underscore.jsテンプレートエンジンの場合のパーシャルを意味しますか？

2.もしそうなら、underscore.jsテンプレートエンジンに部分的に実装するにはどうすればよいですか？

4

3 に答える 3

17

いいえ、Underscoreのテンプレートにはネイティブの部分的なサポートはありません。ただし、必要なJavaScriptのほとんどを内部に配置できます<% ... %>。特に、独自の関数を呼び出すことができるので、部分的なものを簡単に追加できます。次のようなテンプレートを作成できます。

<script id="people-template" type="text/x-handlebars-template">
    <% _(people).each(function(person) { %>
      <%= partial('person', person) %>
    <% }) %>
</script>

partial次に、関数を次のように追加しますwindow。

window.partial = function(which, data) {
    var tmpl = $('#' + which + '-partial').html();
    return _.template(tmpl)(data);
};

デモ： http： //jsfiddle.net/ambiguous/HDuj5/9/

これ{{> ... }}はHandlebarsほど洗練されていませんが、UnderscoreのテンプレートはJavaScript自体の非常に薄いラッパーであり、多少制限があります。名前空間を使用して、物を直接入れないようにするwindowか、{variable: ...}オプションto_.templateとラッパーを使用して標準ヘルパーを設定できます。

于 2012-07-02T18:01:28.343 に答える
13

または、グローバルスコープの使用を避けるために、次のようにグローバルテンプレートヘルパーを混在させることができます。

(function() {
    var originalUnderscoreTemplateFunction = _.template;
    var templateHelpers = {};

    _.mixin({
        addTemplateHelpers : function( newHelpers ) {
            _.extend( templateHelpers, newHelpers );
        },

        template : function(text, data, settings) {
            // replace the built in _.template function with one that supports the addTemplateHelpers
            // function above. Basically the combo of the addTemplateHelpers function and this new
            // template function allows us to mix in global "helpers" to the data objects passed
            // to all our templates when they render. This replacement template function just wraps
            // the original _.template function, so it sould be pretty break-resistent moving forward.

            if( data )
            {
                // if data is supplied, the original _.template function just returns the raw value of the
                // render function (the final rentered html/text). So in this case we just extend
                // the data param with our templateHelpers and return raw value as well.

                _.defaults( data, templateHelpers ); // extend data with our helper functions
                return originalUnderscoreTemplateFunction.apply( this, arguments ); // pass the buck to the original _.template function
            }

            var template = originalUnderscoreTemplateFunction.apply( this, arguments );

            var wrappedTemplate = function( data ) {
                _.defaults( data, templateHelpers );
                return template.apply( this, arguments );
            };

            return wrappedTemplate;
        }
    }
}

次に電話

_.addTemplateHelpers( {
    partial : function() {
        return _.template(
            $('#' + which + '-partial').html(),
            data
        );
    }
} );

githubのアンダースコアミックスインへのリンクは次のとおりです。

于 2012-11-09T22:33:16.103 に答える
1

これはDaveの答えに似ていると思いますが、おそらく必要なコードは少なくなります。

function partialTemplate(origTemplate, partialValues){
    return function(values){
        return origTemplate(_.defaults(values, partialValues));
    };
}

使用例：

var t = _.template('<%= val1 %>,<%= val2 %>'); // original template requiring 2 values
var pt = partialTemplate(t, {val1:1}); // partial template with 1 value pre-populated
pt({val2:2}); // returns '1,2'
pt({val2:3}); // returns '1,3'
于 2014-02-13T16:17:56.923 に答える