Question

我正在尝试使用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();
    }
});

Answer 1

您首先要构建包含数据的模型。

然后在视图中，您将首先编译模板

使用_.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()));
       }

然后在视图的渲染中，您将在模型中传递已编译的模板，该模板将填充模型中的数据。

Answer 2

如果我正确理解你，你现在的设置方式，你将无法触发

   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()));
       }

});

在backbone.js中使用下划线模板

2 个答案: