Вопрос: Как добавить события в javascript runtime, созданные html-виджеты


Я разрабатываю веб-сообщество в CakePHP  и начали сомневаться в использовании JQuery  для предоставления полезных виджетов вокруг представлений, когда это необходимо.

Например, я написал Плагин jQuery  который ищет данные внутри конкретного входного текста, запрашивает мою базу данных и получает результаты, обрабатываемые событиями.

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

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

это ситуация, о которой я думал

enter image description here

Зеленая область изображения - это то место, где я не уверен, где я должен добавлять события по умолчанию каждый раз, когда они мне нужны? После того как я узнал, что тогда, в представлении, я мог бы добавить какое-то событие в виджет, чтобы он был более простым в использовании.

Для виджета я предполагаю, что каждый вид части html загружается через javascript и является интерактивным, возможно, входным поиском, который извлекает список результатов или что-то в этом роде.

Мой вопрос в том, как я могу настроить события по умолчанию во время выполнения для виджета без копирования и вставки каждый раз? И мой второй вопрос: как я могу добавить к ним конкретные события только для представления?

Некоторый учебник где-то в Интернете был бы также приятным.


5


источник


Ответы:


Мой ответ требует backbone.js, поэтому я не уверен, поможет ли это вам.

Вы можете разделить виджет на обертку и реальный виджет. Обертка может обрабатывать события, подобные вашему закрытому событию:

var WidgetWrapper = Backbone.View.extend({

  tagName:  'div',
  // This should be a mustache template:
  template: '<a class="close" href="#">close</a><div class="content"></div>',
  events: {
    '.close click':   'close',
    '.open click' :   'open'
  },
  close: {
     this.$el.hide();
  },
  open: {
     alert('I am open');
  }
  render: {
    this.$el.html(Mustache.to_html(view.template, view.model.toJSON());
  }

});

Реальный виджет может отображаться внутри виджета обертки, и оба представления могут взаимодействовать с моделью данных ( this.model).

var SpecialWidget = Backbone.View.extend({

  tagName:  'div',

  // This should also be a mustache template:
  template: '<input> <a href="#" clas="open">open</a>',

  events: {
    'input change':   'edit'
  },

  render: function() {
    if(!this.wrapper) {
      this.wrapper = new WidgetWrapper();
    }

    // Hand over the model to the wrapper
    this.wrapper = this.model;
    // Render the wrapper
    this.wrapper.render();

    // Insert the widget content inside the wrapper
    this.$el.empty().append(this.wrapper.$el);
    this.$(".content").html(Mustache.to_html(view.template, view.model.toJSON());
  },

  edit: function() {
    alert("Changed");
  },
});

Это позволит вам разделить ваши события.

Вы также можете сделать это наоборот и использовать обертку с дополнительным представлением.


1