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>

运行时，患者显示为未定义/无法在控制台中找到。这是怎么回事？

Answer 1

_.template返回一个函数，然后使用该函数将数据转换为插值字符串。在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);

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

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

2 个答案: