Шаблон Backbone js не загружается через Dynami c jsp - PullRequest
Новая
       26

Шаблон Backbone js не загружается через Dynami c jsp

0 голосов
/ 06 марта 2020

Я использую магистраль 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()
            })
        }
    });

Внутри задачи. jsp, у меня есть шаблон, который я буду sh оказывать отдельно. Файл выглядит примерно так: 

<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: Невозможно прочитать свойство 'replace' из undefined в Function.h.template из нижнего подчеркивания js. Сначала я подумал, что, возможно, jsp не загружен или View1 не отображается перед вызовом представлений шаблона (ViewTask), но, как я уже проверял, он вызывается после полной визуализации JSP. Мой вопрос: как мне загрузить шаблоны из представлений?

1 Ответ

1 голос
/ 06 марта 2020

Вы на правильном пути ... похоже, вы определяете свою функцию шаблона внутри TaskView прямо при загрузке страницы, прежде чем ваш ajax сможет добавить необходимый html на вашу страницу. Даже если вы не создадите экземпляров из TaskView до завершения ajax, определение представления все еще пытается использовать этот 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;
    }
});
...