Backbonejs collection.create:如果出现错误,如何防止它添加项目?

时间:2013-12-20 08:05:04

标签: validation jquery backbone.js

如果在输入中发现错误,如何阻止collection.create将项添加到其集合中?

HTML,

<div id="new-status">
      <h2>New monolog</h2>
      <form action="">
        <textarea name="content"></textarea><br>
        <input type="submit" value="Post">
      </form>
    </div>

    <div id="statuses">
      <h2>Monologs</h2>
      <ul></ul>
    </div>

骨干,

var Status = Backbone.Model.extend({
    initialize: function(){

    },
    validate: function(attrs, options) {
        if(attrs.text === '') alert("please enter some text");
    },
    url:"dummy.php",
    sync: function (method, model, options) {
        return $.ajax({
            type: "POST",
            dataType: 'json',
            url: 'server.php', 
            data: {
                text: this.get("text")
            }
        });
    }
});

var Statuses = Backbone.Collection.extend({
    model: Status
});

var NewStatusView = Backbone.View.extend({

    events: {
        "submit form": "addStatus"
    },

    initialize: function(options) {
         _.bindAll(this, 'addStatus', 'clearInput');
        this.listenTo(this.collection, 'add', this.clearInput) ;
    },

    addStatus: function(e) {
        e.preventDefault();
        this.collection.create({ text: this.$('textarea').val() });
    },

    clearInput: function() {
        this.$('textarea').val('');
    }
});

var StatusesView = Backbone.View.extend({
    initialize: function(options) {
        this.collection.on("add", this.appendStatus, this);
    },

    appendStatus: function(status) {
        this.$('ul').append('<li>' + status.escape("text") + '</li>');
    }
});

$(document).ready(function() {
    var statuses = new Statuses();
    new NewStatusView({ el: $('#new-status'), collection: statuses });
    new StatusesView({ el: $('#statuses'), collection: statuses });
});

因此,当您点击提交按钮而未键入任何文本时,您会在模型中从此部分弹出错误

validate: function(attrs, options) {
            if(attrs.text === '') alert("please enter some text");
        },

但我如何告诉收藏品有错误且不添加此空白项目以及不要解雇 {{ 1}}在模型中?

修改

以这种方式与sync合作......

模型,

collection.create

视图,

validate: function(attrs, options) {
    if(attrs.text === '') {
        var message = "please enter some text";
        alert(message);
        return message;
    }
},

它似乎工作正常,除非它不是一个好方法或反对MVC模式?

2 个答案:

答案 0 :(得分:1)

您的Model's validate方法应返回error字符串,以便在发出警报时不会触发模型保存。

validate: function(attrs, options) {
    if(attrs.text === ''){
      alert("please enter some text");
      return "Text is empty."; // OR proper error CODE
    }
}

检查Backbone.Model的{​​{3}}方法。

答案 1 :(得分:1)

我不认为collection.create是正确的选择。

addStatus: function(e) {
    e.preventDefault();
    var status = new Status({"text": this.$('textarea').val()})
    var error = status.valiate();
    if(!error) {
        this.collection.add(status);  
    } 
},

主干docs也不是说validate

  

如果属性有效,请不要从validate返回任何内容;如果   它们无效,返回您选择的错误。它可以是   简单作为要显示的字符串错误消息,或完整错误   以编程方式描述错误的对象。

因此,您的验证功能应该修复:

validate: function(attrs, options) {
    if(attrs.text === '') {
        var message = "please enter some text";
        alert(message);
        return message;
    }
},