Using jQuery plugin with Moon.js

Hello,

First of all, thank you so much for Moon.js. This is exactly what I needed.

My first project using Moon must use a jQuery plugin. I was able to follow some instructions for Vue.js and adapt it to Moon. (http://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/)

Everything works perfectly except that I can’t pass data from jQuery back to Moon. If you check the link above, there’s a section called “Passing data from jQuery to Vue”. I tried updating a value inside Moon’s data object, but it didn’t work. Here’s my component:

Moon.component("ztree", {
    props: ['id'],
    template: '<ul id="{{id}}" class="ztree"></ul>',
    hooks : {
        mounted: function() {
            var self = this;
            var settings = {
                callback: {
                    onClick: function(event, treeId, treeNode, clickFlag) {
                        self.emit('msg', treeNode.name);
                    }
                }
            }
            var tree = $.fn.zTree.init($(this.$el), settings, zNodes);
        }
    }
}); 

The issue here is inside the onClick callback. “self.emit(‘msg’, treeNode.name);” returns this error:

TypeError: can’t assign to properties of (new String(“Node Name”)): not an object

I also tried with “self.set(‘msg’, treeNode.name);” but nothing gets updated.

Is it a bug or what am I doing wrong?

Thank you for any help you can provide.

Terry

[kbrsh]

Thank you! I got the issue, self is referring to the component data, but the msg is defined on the parent Moon instance data.

To overcome this, you can listen for an event on a global event bus, and set the msg property on the parent instance when the event is fired.

var bus = new Moon();
var t = $("#ztree_tmpl").text();

// ztree moon component
Moon.component("ztree", {
  props: ["id"],
  template: '<ul id="{{id}}" class="ztree"></ul>',
  hooks: {
    mounted: function() {
      var self = this;
      var settings = {
        callback: {
          onClick: function(event, treeId, treeNode, clickFlag) {
            bus.emit("msgChange", {
              msg: treeNode.name
            });
          }
        }
      };

      var tree = $.fn.zTree.init($(this.$el), settings, zNodes);
    }
  }
});

const app = new Moon({
  el: "#app1",
  data: {
    msg: "Node name will be here...",
    tree_id: "treeDemo"
  }
});

bus.on('msgChange', function(ctx) {
  app.set("msg", ctx.msg);
});

[terrybr]

I think it’d be easier for me to attach a zip file with the project. Hopefully it’s OK for me to do that.

moon_test.zip