javascript - 使用主干模板创建独特的 div

Question

我不确定这是否可行，因为我对网络很菜鸟。所以基本上我想做的是，迭代一个数组，并对于数组中的每个元素，用适当的信息填充主干 View 。我认为我可以做的是在我的 .cshtml 中声明此模板:

<div id="template-sample-validation-error">
    <form id="sample-validation-form" class="form">
                <div id="sampleName" class="control-label">Sample Name:</div>
        </form>
</div>

(实际模板中实际上有更多字段，但我没有全部包含)。

因此，使用该模板，我认为我可以将 View 绑定(bind)到该模板，并为集合中的每个项目附加一个新模板。问题是，由于 id 不是唯一的，在主干 View 的初始化方法中，我无法获取唯一的项目:

// some of the backbone view
SampleValidationView = (function() {
    return Backbone.View.extend({
        initialize: function (sample) {
            var sampleMessage = sample.get('sampleName');

// iterating and creating a SampleValidationView to render
_.each(samples, function (aView) {                
            var errorView = new SampleValidationView(aView);
            this.$('#template-sample-validation-error').append(errorView.render().$el);
        });

然后我发现了这篇文章，它基本上是在 div 中添加一个数字以使 div 唯一。
Create Dynamic div with unique IDs - jQuery

我不确定如何使用我创建的模板来做这样的事情。我想另一种选择是做与帖子中所做的类似的事情，但我认为为每个 View 都有一个模板，并且让每个 View 根据数组中的项目数量相互附加会更干净。但我被困住了。任何想法将不胜感激。谢谢!

Answer 1

如果您在模板中使用下划线，则可以在 id 末尾添加 <%= %> 以附加模型或传入对象的 id。例如:

<div id-"unique-id-<%= id %>">
    ...content
</div>

这只会将模型的 id 或您调用 _.template({id : 1}) 时传递到模板中的对象。这将给出:

<div id-"unique-id-1">
    ...content
</div>

您应该做什么，而不是使用 jquery 显式查找#template-sample-validation-error，您应该声明 View 的 el var。这允许您简单地调用 this.$el。所以也许是这样的:

// some of the backbone view
SampleValidationView = (function() {
    return Backbone.View.extend({

        el : '#template-sample-validation-error',
        template : _.template($('#template-sample-validation-error').html()),

        initialize: function (sample) {
            var sampleMessage = sample.get('sampleName');
        },

        render : function(){
            this.$el.html(this.template({id : 1})); // Some unique id

            // iterating and creating a SampleValidationView to render
            _.each(samples, function (aView) {                
                var errorView = new SampleValidationView(aView);
                this.$el.append(errorView.render().$el);
        }
    });