在Backbone.js中创建复选框列表

时间:2012-07-12 14:22:44

标签: backbone.js underscore.js

我想创建一个包含文本字段和复选框列表的表单。

使用带有_.each()语句的下划线模板函数,我可以将其渲染。

当我点击保存按钮时,我得到了模型(带有文本字段),但复选框的数组不是应该的位置....

这是我的观点模型:

window.SpotEditView= Marionette.View.extend({

    initialize: function () {
        var featureList = ['Rail', 'Curb','Pipe'];
        //this.el = this.compiledTemplate(this.model.toJSON());
        var viewModel = this.model.toJSON();
        viewModel.features = featureList;

        $(this.el).html( _.template(htmlBody, viewModel));
        return;
    },

    render: function () {
        return this;
    },

    events: {
        "change"        : "change",
        "click .save"   : "beforeSave",
        "click .delete" : "delete",
        "drop #picture" : "dropHandler"
    },

    beforeSave: function () {
        var self = this;
        var check = this.model.validateAll();
        if (check.isValid === false) {
            utils.displayValidationErrors(check.messages);
            return false;
        }
        // Upload picture file if a new file was dropped in the drop area
        if (this.pictureFile) {
            this.model.set("picture", this.pictureFile.name);
            utils.uploadFile(this.pictureFile,
                function () {
                    self.save();
                }
            );
        } else {
            self.save();
        }
        return false;
    },

    save: function () {
        var self = this;
        this.model.save(null, {
            success: function (model) {
                self.render();
                var point = model.toMarker();
                app.mapView.model.markers.add(point);
                app.navigate('map', true);
                app.mapView.openInfo(point);

            },
            error: function () {
                utils.showAlert('Error', 'An error occurred while trying to save this item', 'alert-error');
            }
        });
    }
});

这是我的html模板的相关部分:

<% _.each(features, function(f,key) { %>
<label class="checkbox">
    <input type="checkbox" name="features[<%= key-1 %>]" value="<%= f %>">
    <%= f %>
</label>
<% }); %>

保存功能收到的模型如下所示:

{..
    attributes:{ ...
        features:[],
        features[1]:'Dick',
        ...
    }
}

似乎主干'form-parser'无法处理数组。

这种方法是否有解决方案或更好的解决方案?

0 个答案:

没有答案