使用parsley.js验证动态创建的字段

Aure77 发表于 Dev

奥雷77

我使用Backbone，Marionette和Parsley.js创建了一个表单，可以在其中动态添加输入。但是，当我添加一个新字段时，欧芹data-parsley-trigger似乎无法在其上验证字段focusout（我认为是因为输入是在欧芹初始化之后创建的）。但是当我单击验证时验证有效（因为parsley()在整个表单上被调用）

那么，如何根据新属性的属性处理新字段并使用验证事件（触发）呢？

MyApp = new Backbone.Marionette.Application;
MyApp.addInitializer(function(options) {
  var vent = new Backbone.Wreqr.EventAggregator();
  var layout = new AppLayout();
  MyApp.addRegions({
    appRegion: '#page'
  });
  MyApp.appRegion.show(layout);

  var collection = new ScheduleCollection();
  var scheduleLayout = new ScheduleLayout({
    vent: vent,
    collection: collection
  });
  layout.main.show(scheduleLayout);
});

var AppLayout = Backbone.Marionette.LayoutView.extend({
  template: "#app-layout-template",
  regions: {
    main: "#main",
    second: "#second"
  }
});

var ScheduleItemModel = Backbone.Model.extend({
  defaults: {
    date: "01/02/2016"
  }
});
var ScheduleCollection = Backbone.Collection.extend({
  model: ScheduleItemModel
});

var ScheduleItemView = Backbone.Marionette.ItemView.extend({
  tagName: "li",
  className: "sheduleblock",
  template: "#schedule-item-template",
  events: {
    "click .date": "changeDate",
    "click #remove-btn": "removeView"
  },
  modelEvents: {
    "change": "render"
  },
  changeDate: function() {
    this.model.set({
      date: "03/04/2016"
    });
  },
  removeView: function(e) {
    this.triggerMethod("remove:view", "test");
  }
});
var ScheduleLayout = Backbone.Marionette.CompositeView.extend({
  tagName: 'form',
  template: "#schedule-layout-template",
  childViewContainer: "ul",
  childView: ScheduleItemView,
  maxChildViewCount: 3,
  ui: {
    btn: '#myButton',
    submit: '#submit',
    form: 'form'
  },
  events: {
    'click @ui.btn': 'addItem',
    'click @ui.submit': 'validate'
  },
  initialize: function() {
    this.collection.set({
      'removeable': false
    });
  },
  addItem: function() {
    if (this.collection.size() < this.maxChildViewCount) {
      this.collection.add({
        removeable: true,
        viewId: this.collection.size()
      });
    }
    if (this.collection.size() >= this.maxChildViewCount) {
      this.ui.btn.prop("disabled", true)
    }
  },
  onChildviewRemoveView: function(childView, data) {
    this.collection.remove(childView.model);
    if (this.collection.size() < this.maxChildViewCount) {
      this.ui.btn.prop("disabled", false)
    }
  },
  validate: function(e) {
    e.preventDefault();
    if (this.$el.parsley().validate()) {
      alert("validation success");
    } else {
      alert("validation failed");
    }
  },
  onRender: function() {
    this.$el.parsley();
  }
});

MyApp.start();

body {
  margin: 0
}
.sheduleblock {
  border: solid 1px white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.5/backbone.marionette.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.9/parsley.min.js"></script>

<div id="page"></div>
<script type="text/template" id="app-layout-template">
  <div id="main"></div>
  <div id="second"></div>
</script>
<script type="text/template" id="schedule-layout-template">
  <ul></ul>
  <button id="myButton" type="button">Add Date</button>
  <button type="button" id="submit">Validate</button>
</script>
<script type="text/template" id="schedule-item-template">
  Test:
  <input type="text" name="test<%- obj.viewId %>" data-parsley-required="true" data-parsley-minlength="3" data-parsley-trigger="focusout" />
  <% if(obj.removeable===true) { %>
    <button id="remove-btn">Remove</button>
    <% } %>
</script>