json - 使用主干模型使用下划线模板引擎渲染 html 表

Question

我正在尝试使用 Underscore 和 Backbone 简单地显示一些 JSON。以下是代码。我使用的模板出现一些解析错误。错误是这样的:“元素的内容必须由格式良好的字符数据或标记组成。”感谢任何帮助:

以下是我拥有的 JSON 对象:

[  { name: 'mem1 mem1', 
     enrolmentDate: '12 May 2023', 
     optOutExpiryDate: '17 May 2023', 
     enrolmentType: 'Without qualifying earnings', 
     paymentSource: 'pmtSrc', 
     group: 'grp' 
   }, 
   { name: 'mem2 mem2', 
     enrolmentDate: '21 Jan 2022', 
     optOutExpiryDate: '26 Jan 2022', 
     enrolmentType: 'Without qualifying earnings', 
     paymentSource: 'pmtSrc', group: 'grp' 
   }
];

以下是模板:

<script id="workerTemplate" type="text/template">
<td><&percnt;&equals; name &percnt;></td>
<td><&percnt;&equals; enrolmentDate &percnt;></td>
<td><&percnt;&equals; optOutExpiryDate &percnt;></td>
<td><&percnt;&equals; enrolmentType &percnt;></td>
<td><&percnt;&equals; paymentSource &percnt;></td>
<td><&percnt;&equals; group &percnt;></td>
</script>

下面是需要显示JSON数据的表格:

<table id="addAndSearchActiveMemberTableId"             styleClass="table_cont_shedule worker_table col_align" rowClasses="odd,even">
                                        <thead>
                                            <tr>
                                            <th class="name" scope="col">Name</th>
                                            <th class="enrol_date" scope="col">Enrolment date</th>
                                            <th class="oo_exp_date" scope="col">Opt out expiry date</th>
                                            <th class="enrol_type" scope="col">Enrolment type</th>
                                            <th class="pay_src" scope="col">Payment source</th>
                                            <th class="grp" scope="col">Group</th>
                                            </tr>
                                        </thead>
                                        <tbody id="workers">
                                        </tbody>
                                    </table>


Follwing is the JavaScript using backbone framework:

                <script type="text/javascript">

                  var app = app || {};
                //This is the backbone model of worker
                  app.Worker = Backbone.Model.extend({
                      defaults: {
                          name: 'None',
                          enrolmentDate: 'None',
                          optOutExpiryDate: 'None',
                          enrolmentType: 'None',
                          paymentSource: 'None',
                          group: 'None'
                      }
                  });

//this is workerlist
                  app.WorkerList = Backbone.Collection.extend({
                        model: app.Worker
                  });


//The workerView
                  app.WorkerView = Backbone.View.extend({
                        tagName: 'tr',
                        className: '',
                        template: _.template( $( '#workerTemplate' ).html() ),

                        render: function() {
//this.el is what we defined in tagName. use $el to get access to jQuery html() function
                            window.alert("I am in render function of WorkerView");
                            this.$el.html( this.template( this.model.attributes ) );

                            return this;
                        }
                    }); 


//The workerListView
                  app.WorkerListView = Backbone.View.extend({
                        el: '#workers',

                        initialize: function( initialWorkers ) {
                            window.alert("initialize method called");
                            this.collection = new app.WorkerList( initialWorkers );
                            this.render();

                        },

// render workerCollection by rendering each worker in its collection
                        render: function() {
                            this.collection.each(function( item ) {
                                window.alert("calling renderWorker from render function of WorkerListView");
                                this.renderWorker( item );
                            }, this );
                        },

// render a worker by creating a workerView and appending the
// element it renders to the workerCollection's element
                        renderWorker: function( item ) {
                            window.alert("I am in renderWorker of WorkerListView");
                            var workerView = new app.WorkerView({
                                model: item
                            });
                            this.$el.append( workerView.render().el );
                        }
                    });

                  $(function() {

                        window.alert("function invoked");
                        var workers = [
                            { name: 'mem1 mem1', enrolmentDate: '12 May 2023', optOutExpiryDate: '17 May 2023', enrolmentType: 'Without qualifying earnings', paymentSource: 'pmtSrc', group: 'grp' },
                            { name: 'mem2 mem2', enrolmentDate: '21 Jan 2022', optOutExpiryDate: '26 Jan 2022', enrolmentType: 'Without qualifying earnings', paymentSource: 'pmtSrc', group: 'grp' }
                        ];
                        window.alert("Data passed to WorkerListView");
                        new app.WorkerListView( workers );
                    });
                  </script>


Now the question is:Is this the correct way to implement? It's not working :( 
 what are the flaws in the code. I have tried the code in html page, it's working fine , but in xhtml it's not working.

Answer 1

您需要对模板进行转义，以便下划线能够插入传入的值。尝试以下模板:

<script id="workerTemplate" type="text/template">
<td><%= name %></td>
<td><%= enrolmentDate %></td>
<td><%= optOutExpiryDate %></td>
<td><%= enrolmentType %></td>
<td><%= paymentSource %></td>
<td><%= group %></td>
</script>

此外，最好调用 model.toJSON()而不是直接传入属性。

所以代替:

this.$el.html( this.template( this.model.attributes ) );

您应该调用:

 this.$el.html( this.template( this.model.toJSON()) );

这是一个指向 jsBin 的链接