Backbonejs collection.create：如何prevent它添加项目，如果有一个错误？ [英] Backbonejs collection.create: how to prevent it from adding items if there is an error?

问题描述

如何从添加项目到其收藏如果输入发现错误我可以prevent collection.create ？

How can I prevent collection.create from adding items into its collection if there is an error found in the input?

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

所以，当你打无需键入任何文本提交按钮，你从这个部分的错误弹出模型，

So, when you hit the submit button without typing any text, you get an error popup from this part in the model,

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

但我怎么能告诉集合有一个错误和不添加这个空项目，也是不火 同步模型？

But how can I tell the collection that there is an error and do not add this empty item and also do not fire sync in the model?

编辑：

得到它以这种方式与 collection.create 工作...

got it worked with collection.create in this way...

模式，

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

查看

addStatus: function(e) {
        e.preventDefault();
        var one = new Status({ text: this.$('textarea').val() });

        if (!one.isValid()) {
            alert(one.validationError);
        } else {
            this.collection.create(one);
        }

    },

这似乎很好地工作，除非它是不是一个好的做法或反对MVC模式？

it seems to work fine unless it is not a good approach or against MVC pattern?

推荐答案

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

I don't think collection.create is the right choice here.

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

也并不骨干文档说，这大约验证：

如果属性是有效的，无法返回验证任何东西;如果
  它们是无效的，返回您选择的错误。它可以是如
  简单作为字符串的错误消息被显示，或者一个完整的错误
  对象描述错误编程。

If the attributes are valid, don't return anything from validate; if they are invalid, return an error of your choosing. It can be as simple as a string error message to be displayed, or a complete error object that describes the error programmatically.

所以，你的验证功能应该是固定的：

So, your validate function should be fixed:

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

这篇关于Backbonejs collection.create：如何prevent它添加项目，如果有一个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！