骨干js模板未通过动态jsp加载答案

【问题标题】：Backbone js template is not loading through dynamic jsp骨干js模板未通过动态jsp加载
【发布时间】：2020-06-19 00:11:12
【问题描述】：

我在我的项目中使用主干 js 来渲染这样的视图---

      var View1 = Backbone.View.extend({
        el: "#container",
        initialize: function (){
            this.render();
        },

        render: function(){
            var parent = this;

            $.get('http://localhost:8080/pages/task.jsp').done(function (data){
                parent.$el.html(data);
                var view = new ViewTask1()
            })
        }
    });

在 task.jsp 中，我有一个希望单独渲染的模板。该文件看起来像这样，..

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>

</ul>


<div id="abc"></div>

<script type="text/template" id="task-card-template">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</script>

然后我将一些数据插入到集合中，将集合映射到模型并尝试按如下方式呈现此模板：

//Create Task View
var TaskView = Backbone.View.extend({
    initialize : function() {
        this.render();
    },

  template: _.template($('#task-card-template').html()),

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }

});

var ViewTask1 = Backbone.View.extend({
    el : "#abc",
    initialize : function() {
        this.render();
    },
    render : function() {
         this.$el.html('');

         Tasks.each(function(model) {
            var task = new TaskView({
                model : model
            });

            this.$el.append(task.render().el);
        }.bind(this));

        return this;
    },
});

但我收到错误消息，TypeError: Cannot read property 'replace' of undefined 在 Function.h.template 来自下划线 js。起初，我认为在调用模板视图（ViewTask）之前可能没有加载 jsp 或者 View1 没有渲染，但是我已经检查过它是在 JSP 完全渲染之后被调用的。我的问题是如何从视图中加载模板？

【问题讨论】：

标签： javascript jsp backbone.js backbone-views

【解决方案1】：

您走在正确的轨道上...看起来您正在 TaskView 中定义模板函数，就在页面加载时，在您的 ajax 有机会将所需的 html 添加到您的页面之前。即使您在 ajax 完成之前没有创建 TaskView 的任何实例，视图定义仍在尝试立即使用该 html。

我认为您有两种可能的解决方案：（1）在 initialize 或 render 方法中定义模板函数，直到您有实例才会执行。或者 (2) 将 html 放在页面上的某个位置（可能在隐藏的 div 中），以便可以立即获取它。

解决方案 (1) 可能有点像这样：

var TaskView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    // no template method yet
    render: function() {
        // inside render method, define template method if not already defined
        if (!this.template) {
            this.template = _.template($('#task-card-template').html());
        }
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

【讨论】：