K
K
Klaus Kater2015-05-13 16:10:26
JavaScript
Klaus Kater, 2015-05-13 16:10:26

How to make ember and jquery UI friends?

I'm trying to pervert by attaching a menu on the right button to the Ember component. The first thought was to attach a ready-made context menu from jquery UI, but ember, as usual, began to show off, and pretend that nothing was attached to it.
I found several examples of such a plan:

App.NodeComponent = Ember.Component.extend({
  initialize: (function() {
    this._super();
      this.$().contextmenu({
        delegate: ".hasmenu",
        menu: [
            {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
            {title: "----"},
            {title: "More", children: [
                {title: "Sub 1", cmd: "sub1"},
                {title: "Sub 2", cmd: "sub1"}
                ]}
            ],
        select: function(event, ui) {
            console.log("select " + ui.cmd + " on " + ui.target.text());
        }
      });
  }).on('didInsertElement'),


But this design refuses to work.
Is it possible to make ember friends with jquery UI modules? And does ember have an alternative menu on the right button?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stanislav Romanov, 2015-05-13
@kurojneko

The context menu module is not used, but by other jQuery UI modules constantly.
Is there anything output in the console?
You have errors in the code:
1. The name of the component consists of at least two words, and you have one;
2. The name of the initialize function is very dumb, replace it with something like contextMenuInit;
3. this._super(); discard accordingly;
4. Why take a function in parentheses? It may work, but it's not in the style code.

App.XNodeComponent = Ember.Component.extend({
  contextMenuInit: function() {
      this.$().contextmenu({
        delegate: ".hasmenu",
        menu: [
            {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
            {title: "----"},
            {title: "More", children: [
                {title: "Sub 1", cmd: "sub1"},
                {title: "Sub 2", cmd: "sub1"}
                ]}
            ],
        select: function(event, ui) {
            console.log("select " + ui.cmd + " on " + ui.target.text());
        }
      });
  }.on('didInsertElement')
});

Here is an example with a working context menu

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question