下划线模板无法访问模型数据

Question

我正在尝试从模板中呈现一组视图，但我无法在视图模板中访问我的模型数据。如果我在模板中放置一个 <% debugger %> 调用，我可以在本地范围内将患者变量视为一个对象，并且还可以从控制台访问模型的属性，例如。 patients.first_name。但是我已经尝试了模板中我能想到的所有排列来访问模型值，但似乎无法获取数据（即 <%= patient.first_name %>、<%= patient['first_name'] %> 结果为“Can't find variable: patient” ).

值得注意的是，PatientView 中的点击处理程序为单个视图输出正确的 'id' 属性，因此模型数据显然已传递到视图中。

        (function () {
        Patient = Backbone.Model.extend({});
        PatientCollection = Backbone.Collection.extend({
            model: Patient
        });

        PatientListView = Backbone.View.extend({
            tagName: "div",

            initialize: function () {
                _.bindAll(this, "renderPatient");
            },

            renderPatient: function (model) {
                console.log(model); //<--object with 'attributes' property containing patient model
                var patientView = new PatientView({model: model});
                patientView.render();
                $(this.el).append(patientView.el);
            },

            render: function () {
                this.collection.each(this.renderPatient);
            }
        });

        PatientView = Backbone.View.extend({
            tagName: "div",
            events: {
                "click button": "clicked"
            },

            clicked: function (e) {
                //e.preventDefault();
                var id = this.model.get("id");
                console.log(id);
            },

            render: function () {
                console.log(this.model.toJSON()); //<--object with all model properties
                var template = _.template($("#patients-item-view").text());
                template({patient: this.model.toJSON()});
                $(this.el).append(template);
            }
        });

        var items = new PatientCollection(patientData.data);

        var view = new PatientListView({collection: items});

        view.render();

        $("#patient-data").html(view.el);
    })();

模板很大，但暂时进行了缩写，并且只有一个模型数据引用：

<script type="text/template" id="patients-item-view">
    <div class="container-fluid patient-data-bar">
        <div class="row">
            <div class="col-md-1">
                <%= patient.first_name %>
            </div>
</script>

当运行时，患者在控制台中显示为 undefined/can 未找到。这是怎么回事？

Answer 1

_.template returns 一个用于将数据转换为内插字符串的函数。在您的 render 方法中，您将该函数提供给 jQuery.append 但它此时无法访问数据。

尝试

render: function () {
    var template = _.template($("#patients-item-view").text());
    var html = template({patient: this.model.toJSON()});
    this.$el.append(html); // views have a cached version of the element 
}

Answer 2

                var template = _.template($("#patients-item-view").text());
                var vars = { patient: this.model.toJSON() };
                var html = template(vars);
                this.$el.append(html);

也因为下面发布的原因而工作。

下划线模板无法访问模型数据

Underscore template can't access model data

backbone.js

underscore.js

underscore.js-templating