javascript 下划线中的部分模板（就像在车把中一样）？

Partials template in underscore (just like in handlebars)?

提问by bhargav

I have a backbone model like this

我有一个像这样的主干模型

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

});

And below are my templates

下面是我的模板

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

This is how I implemented partial using handlebars.js.

这就是我使用 handlebars.js 实现部分的方式。

My questions

我的问题

1.Do we have similar thing, I mean the partials incase of underscore.js template engine?

1.我们有类似的东西吗，我的意思是underscore.js模板引擎的partials？

2.If so how do we implement partial in underscore.js template engine

2.如果是我们如何在underscore.js模板引擎中实现partial

回答by mu is too short

No, there is no native partial support in Underscore's templates. But, you can put pretty much any JavaScript you want inside <% ... %>; in particular, you can call your own functions so you can add something partial-ish without much difficulty. You could have a template like this:

不，Underscore 的模板中没有本机部分支持。但是，您几乎可以将任何想要的 JavaScript 放入其中<% ... %>；特别是，你可以调用你自己的函数，这样你就可以毫不费力地添加一些部分的东西。你可以有一个这样的模板：

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

and then add a partialfunction to window:

然后添加一个partial函数window：

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

Demo: http://jsfiddle.net/ambiguous/HDuj5/9/

演示：http: //jsfiddle.net/ambiguous/HDuj5/9/

That's not quite as slick and pretty as {{> ... }}in Handlebars but Underscore's templates are a very thin wrapper around JavaScript itself and that limits you somewhat. You can use namespaces to avoid putting things directly in windowor you could use the {variable: ...}option to _.templateand a wrapper to set up your standard helpers.

这不像{{> ... }}在 Handlebars 中那么流畅和漂亮，但 Underscore 的模板是围绕 JavaScript 本身的一个非常薄的包装器，这在一定程度上限制了你。您可以使用命名空间来避免直接放入东西，window或者您可以使用{variable: ...}选项_.template和包装器来设置标准助手。

回答by Brave Dave

Or to avoid using global scope you can mix in global template helpers like so:

或者为了避免使用全局范围，您可以像这样混合使用全局模板助手：

(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;
        }
    }
}

Then call

然后打电话

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

Here is a link to the underscore mixinon github.

这是github 上下划线 mixin的链接。

回答by codebox

I think this is similar to Dave's answer, but perhaps requiring less code:

我认为这类似于 Dave 的回答，但可能需要更少的代码：

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

Example usage:

用法示例：

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'