Отделение шаблонной логики от Backbone.View

Question

Я только начал изучать Backbone.js и работал над (что еще) простым приложением.В этом приложении я хочу отображать мои задачи внутри <ul id="unfinished-taks"></ul> с каждой задачей как элемент <li>.Пока все просто.

В соответствии с прочитанными мною учебниками я должен создать вид со следующим:

// todo.js
window.TodoView = Backbone.View.extend({
    tagName: 'li',
    className: 'task',
    // etc...
});

Это работает нормально, но это плохо для определенияструктура разметки HTML моего списка дел внутри кода Javascript.Я бы лучше определил разметку целиком в шаблоне:

// todo.js
window.TodoView = Backbone.View.extend({
    template: _.template($("#template-task").html()),
    // etc...
});

<!-- todo.html -->
<script type="text/template" id="template-task">
    <li class="task <%= done ? 'done' : 'notdone' %>"><%= text %></li>
</script>

Однако, если я сделаю это таким образом, Backbone.js по умолчанию использует tagName: 'div' и оборачивает все мои задачи в бесполезный <div> тегов.Есть ли способ, чтобы разметка HTMl полностью содержалась в моем шаблоне, не добавляя немантические теги <div> вокруг каждого элемента представления?

Answer 1

Если вы планируете визуализировать вид только один раз, вы можете установить свойство el вида вручную в .initialize():

// todo.js
window.TodoView = Backbone.View.extend({
    template: _.template($("#template-task").html()),

    initialize: function() {
        this.el = $(this.template(this.model.toJSON())).get(0);
    },

    // etc
});

Однако здесь есть несколько предостережений:

• Backbone ожидает, что свойство el будет одним элементом.Я не уверен, что произойдет, если ваш шаблон имеет несколько элементов в корне, но, вероятно, это будет не то, что вы ожидаете.

• Повторная визуализация здесь затруднена, потому чтоРендеринг шаблона дает вам совершенно новый элемент DOM, и вы не можете использовать $(this.el).html() для обновления существующего элемента.Таким образом, вы должны каким-то образом вставить новый элемент в точку старого элемента, что непросто и, вероятно, включает в себя логику, которую вы не хотите использовать в .render().

Этине обязательно являются ограничителями show, если ваша функция .render() не нуждается в повторном использовании шаблона (например, возможно, вы изменили класс и текст вручную, с помощью jQuery), или если вам не нужно повторно выполнять рендеринг.Но будет неприятно, если вы собираетесь использовать стандартный подход Backbone «перерисовать шаблон» для обновления представления при изменении модели.