1

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

2 回答 2

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

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

于 2013-08-22T20:18:39.577 回答
1

如果我对您的理解正确，那么您现在进行此设置的方式将无法触发

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

});
于 2013-08-22T20:28:29.970 回答