использование шаблонов подчеркивания с backbone.js

Я пытаюсь создать страницу, используя backbone.js и underscore.js. Я хочу, чтобы на странице была кнопка, которая при нажатии добавляет содержимое формы в пустой тег на странице, используя определенный мной шаблон.

Вот мой пустой тег, в который я хочу, чтобы после нажатия кнопки помещался материал шаблона:

<div id="playView"></div>
<input type="button" id="addQuestion" value="Add Question" />

Вот мой шаблон, куда должны идти данные формы:

<script id="viewTemplate" type="text/template">
   <div id="stemView">{{ Stem }}</div>
    <label for="answer1"> a)</label><div>{{ answer1View }}</div>
    <label for="answer2"> b)</label><div>{{ answer2View }}</div>
    <label for="answer3"> c)</label><div>{{ answer3View }}</div>
    <label for="answer4"> d)</label><div>{{ answer4View }}</div>
</script>

А вот форма, которую заполнит пользователь:

<form>
    <textarea id="stem"><textarea>
    <textarea id="answer1"></textarea>
    <textarea id="answer2"></textarea>
    <textarea id="answer3"></textarea>
    <textarea id="answer4"></textarea>
</form>

А вот соответствующий код backbone.js. У меня вопрос, что мне делать в случае? Как мне получить данные из формы, затем в viewTemplate, а затем в пустой тег div (playView)?

wizard.PlayView = Backbone.View.extend({
    initialize: function () {
        this.model.bind('change', _.bind(this.render, this));
    },
    el: '#playView',

    events: {
        'click button#addQuestion': 'addQuestion'
    }
    addQuestion: function () {
        $(this.el).append();
    }
});

backbone.js underscore.js backbone-events backbone-views
person SkyeBoniwell    schedule 22.08.2013    source источник
comment
Какую библиотеку шаблонов вы используете? Синтаксис выглядит как Handlebars   -  person Sushanth --    schedule 23.08.2013
comment
подчеркивание, но я изменил правила шаблона, чтобы использовать {{ }}   -  person SkyeBoniwell    schedule 23.08.2013
comment
Вроде не по теме, но, если вы используете версию Backbone › 0.9.0. Вы можете использовать this.$el вместо $(this.el) для ссылки на элемент представления. Кроме того, вы можете использовать this.model.on('change',this.render,this) для предоставления контекста обратного вызова. bind — это псевдоним для on.   -  person fbynite    schedule 23.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно вас понимаю, то, как вы сейчас настроили, вы не сможете запустить

   events: {
        'click button#addQuestion': 'addQuestion'
    }

потому что входной тег должен быть в магистральном шаблоне. Таким образом, чтобы решить эту проблему, шаблон черной кости будет отображать кнопку на странице, а затем прослушивать нажатие на кнопку. При нажатии кнопки вы загрузите шаблон вопроса (который встроен в html-страницу и вставит его в текущий базовый шаблон.

<script id="viewTemplate" type="text/template">
   <div id="stemView">{{ Stem }}</div>
    <label for="answer1"> a)</label><div>{{ answer1View }}</div>
    <label for="answer2"> b)</label><div>{{ answer2View }}</div>
    <label for="answer3"> c)</label><div>{{ answer3View }}</div>
    <label for="answer4"> d)</label><div>{{ answer4View }}</div>
</script>

<script id="mainTemplate" type="text/template">
  <input type="button" id="addQuestion" value="Add Question" />
</script>


wizard.PlayView = Backbone.View.extend({
    initialize: function () {
        this.model.bind('change', _.bind(this.render, this));
    },

el: '#playView',

template : _.template($('#mainTemplate').html())

events: {
    'click button#addQuestion': 'addQuestion'
}

addQuestion: function () {
    var t = _.template($('#stemTemplate').html();
    $(this.el).append(t(this.model.toJSON()));
}

 render: function() {
            $(this.el).append(this.template(this.model.toJSON()));
       }

});
person josephmisiti    schedule 22.08.2013
comment
Спасибо за код. Значит, ваш код исправит мое событие? Поэтому всякий раз, когда нажимается кнопка «addQuestion», viewTemplate будет заполняться данными из формы, которая затем будет заполнять playView. Спасибо - person SkyeBoniwell; 23.08.2013
comment
Мой код исправит событие и вызовет его. В этот момент это так же просто, как вставить html в ваш шаблон с помощью jQuery.append() - person josephmisiti; 24.08.2013

arrow_upward
1
arrow_downward

Сначала вы должны построить модель, содержащую данные.

Затем внутри представления вы должны сначала скомпилировать шаблон

Используйте _.template для компиляции шаблона

   wizard.PlayView = Backbone.View.extend({
        template : _.template($('#viewTemplate').html())
        initialize: function () {
        // Use listenTo to bind events instead of directly 
        // listening on the model
            this.listenTo(this.model, 'change', this.render);
        },
        events: {
            'click .addQuestion': 'addQuestion'
        },
        addQuestion: function(e) {
            var $target = $(e.target);
            // Your logic here
        },
        render: function() {
            $(this.el).append(this.template(this.model.toJSON()));
       }

Затем внутри рендеринга представления вы передадите модель вместе с скомпилированным шаблоном, который будет заполнен данными внутри модели.

person Sushanth --    schedule 22.08.2013
comment
О, хорошо, я получаю данные в своей модели. Но как насчет события кнопки? Разве мне это сейчас не нужно? Спасибо - person SkyeBoniwell; 23.08.2013
comment
@999cm999.. Создайте хэш событий и добавьте в него событие. Должно быть хорошо .. И я считаю, что у вас может быть 1 кнопка для каждого вида формы. Поэтому используйте class вместо id, поскольку идентификатор должен быть уникальным. Проверьте обновленный пост. - person Sushanth --; 23.08.2013