Отслеживание события нажатия кнопки в Grapesjs Modal - PullRequest
Новая
       26

Отслеживание события нажатия кнопки в Grapesjs Modal

0 голосов
/ 10 июля 2019

В редакторе Grapesjs я хочу модал, который содержит форму.При нажатии кнопки отправки я хочу вызвать функцию, которая будет выполнять вызов ajax.

Я попытался написать собственный компонент, расширенный из компонента по умолчанию, и загрузить его в виде блока.Я могу получить модальный с формой.Я не знаю, как отслеживать форму кнопки отправки события.

Мой код: 

 const domc = editor.DomComponents;
  const defaultType = domc.getType('default');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;

  domc.addType("test-type", {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          type      : "test-type",
          id:"popup",
          droppable : false,
          resizable : true,
          tagName:"popup",
        }),
        getAttrToHTML: function() {
          var attr = defaultType.model.prototype.getAttrToHTML.apply(this, arguments);
          delete attr.onmousedown;
          var testmarker = this.get("testmarker");
          if(testmarker)
            attr.testmarker = testmarker;
            console.log(attr)
          return attr;
        }
      }),
    view: defaultType.view.extend({
      tagName: "button",
      events: {
        "dblclick": "openModal",
      },
      initialize: function(o) {
        defaultType.view.prototype.initialize.apply(this, arguments);
        this.listenTo(this.model, "change:testmarker", this.updateMarker);
        this.listenTo(this.model, "dblclick active", this.openModal);
      },

      updateMarker: function() {
        var testmarker = this.model.get("testmarker");
        console.log(this.$el.byId)
        console.log(this.$el._events);
        this.$el.attr("testmarker", testmarker);
      },

      openModal: function(e) {

        const modal = editor.Modal;
        console.log(modal)
        modal.open({
          title: '<br>Create Identity<br>',
          content: `
          <div class="container"> 
              <form onsubmit="formSubmit()">
              <div class="form-group">
              <label>URL</label>
               <input type="text" class="form-control" id="url" placeholder="http://test-data/" name="url">
              </div>
              <div class="form-group">
              <label>Identity </label>
               <input type="text" class="form-control" id="address" placeholder="Enter Identity Address" name="address">
              </div>
              <button type="submit" class="btn btn-danger">Submit</button>
              </form>
              </div>`,

        });

1 Ответ

0 голосов
/ 11 июля 2019

Вы должны определить свою логику javascript (прослушивание кликов, ajax-вызовов и т. Д.) В части сценария определения пользовательского компонента. проверить эту ссылку: компоненты и JS

UPDATE: если вы настаиваете на использовании этого подхода в части просмотра, выполните следующее: 

view: defaultType.view.extend({
    events: {
        click: 'handleClick',
    },
    createContent() {
        const content = document.createElement('div');
        content.style = 'position: relative';
        content.innerHTML = `
                <div class="container"> 
                  <form>
                      <div>
                          <label>URL: </label>
                           <input type="text" id="url" placeholder="http://test-data/" name="url">
                      </div>
                      <div>
                          <label>Identity: </label>
                           <input type="text" id="address" placeholder="Enter Identity Address" name="address">
                      </div>
                  </form>
                </div>
    <button style="
      position: absolute;
      top: 0; right: 0;
      background-color: #fff;
      font-size: 1rem;
      border-radius: 3px;
      border: none;
      padding: 10px 20px;
      cursor: pointer
    ">
         Submit
    </botton>
  `;

        return content;
    },
    handleClick: function (e) {
        var modal = editor.Modal;
        var content = this.createContent()
        var btn = content.children.length === 2 && content.children[1];
        btn.addEventListener('click', this.applyChanges)
        modal.open({
            title: '<br>Create Identity<br>',
            content: content
            ,
        });
    },
    applyChanges() {
      // DO YOUR AJAX STUFF HERE
    },
}),
...