kind confusion new one please update...very important

edited August 2013 in Enyo 2
Sorry no jsfiddle from company..have pasted the whole html page of my design. The design is when I click john or madhu, I need the form to appear. No using switch, I can get different components to be printed.
When I click john, I need a form and when I click madhu I need list. Please find the script
<!DOCTYPE html>

Enyo Bootplate App

enyo.kind({ name: "ControlSample", kind: "Scroller", components: [ { kind: "onyx.InputDecorator", components: [ { kind: "onyx.Input", placeholder: "Enter UserName", onchange: "changed" } ]}, { tag: "br"},{ tag: "br"}, { kind: "onyx.InputDecorator", components: [ { kind: "onyx.Input", placeholder: "Enter Password", onchange: "changed" } ]}, { tag: "br"},{ tag: "br"}, { kind: "onyx.Button", content: "Sign In" } ], tapped: function(inSender, inEvent) { // React to taps }, changed: function(inSender, inEvent) { // React to changes } }); enyo.kind({ name: "ListSample", kind: "Panels", classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit", arrangerKind: "CollapsingArranger", components: [ {layoutKind: "FittableRowsLayout", classes: "enyo-fit panels-sample-flickr-main",components: [ {kind: "List", fit: true, count: 3, touch: true, onSetupItem: "setupItem", ontap: "itemTap",components: [ { name: "text",classes: "panels-sample-flickr-item enyo-border-box" } ]} ]}, {name: "pictureView", fit: true, kind: "FittableRows", classes: "enyo-fit panels-sample-flickr-main", components: [ {name: "backToolbar", kind: "onyx.Toolbar", showing: false, components: [ {kind: "onyx.Button", content: "Back", ontap: "showList"} ]}, {fit: true, style: "position: relative;", components: [ { fit: true,name: "text1" }, {name: "imageSpinner", kind: "Image", src: "assets/spinner-large.gif", classes: "enyo-fit panels-sample-flickr-center", showing: false} ]} ]} ], setupItem: function(inSender, inEvent) { var ic = inEvent.index;//alert(ic); this.results = []; var items={"employees": [{ "id":"John" , "content":"Test" },{ "id":"Madhu" , "content":"Madhu1" }]}; this.results = this.results.concat(items); for(var i = 0; i < ic; i++) { //this.items[i] = "This is row " + i; this.$.text.setContent(items.employees[i].id); } this.$.text.addRemoveClass("onyx-selected", inSender.isSelected(ic)); // this.$.text.setContent("This is row " + items.inEvent.items); return(true); }, reflow: function() { this.inherited(arguments); var backShowing = this.$.backToolbar.showing; this.$.backToolbar.setShowing(enyo.Panels.isScreenNarrow()); if (this.$.backToolbar.showing != backShowing) { this.$.pictureView.resized(); } }, tapped: function(inSender, inEvent) { enyo.log(inEvent.index); }, itemTap: function(inSender, inEvent) { if (enyo.Panels.isScreenNarrow()) { this.setIndex(1); } var item = this.results[0];alert(item.employees[inEvent.index-1].id); this.$.text1.hide(); var myk = new enyo.kind({name: "ControlSample",kind: "Scroller",components: [{ kind: "onyx.Button", content: "Sign In" }]}); this.$.text1.addContent(myk); this.$; //this.$.text.setContent(items[i].id); this.$; //var item = this.results[inEvent.index]; //08023396510 }, showList: function() { this.setIndex(0); } }); new ListSample().renderInto(document.body);


  • edited May 2013
    this is the error i get
    function () { if (!(this instanceof arguments.callee)) throw "enyo.kind: constructor called directly, not using 'new'"; var e; this._constructor && (e = this._constructor.apply(this, arguments)), this.constructed && this.constructed.apply(this, arguments); if (e) return e; }
  • edited May 2013
    When you post code, you need to surround it with pre and code tags to get it to format correctly and for the HTML inside the code to be shown as text. The easiest way is to paste in the code, then highlight it and hit the "C" button above the editor.

    I will often manually edit posts to fix this for users, but it's really annoying.
  • It looks like this might be the problem:

    var myk = new enyo.kind({name: "ControlSample",kind: "Scroller",components: [{ kind: "onyx.Button", content: "Sign In" }]});

    I think you just want:

    var myk = new ControlSample();

    since you already have that kind defined at the top of your js code.

    However, what you probably REALLY want is something like:
    var myk = this.$.text1.createComponent({kind: "ControlSample"});
    Create a new instance of the component where you want it to be owned/contained, then render it.
  • @sugardave
    The above code is working as per requirement, thank you!
    sorry for the inconvenience, I shall indent the code....from next post

    One more problem in this script, Actually the list "John and Madhu are printing thrice" if I change the count to 2 I get only John..what is wrong in my script..
  • Its working fine...the updates are made on the UI looks good...
    thank you all for the help!
  • So I updated my git modules today (using a project dupliforked off of bootplate-mvc) and started seeing the issue described above. So I pulled a fresh copy of bootplate-mvc and ran the submodule command, and the bootplate project is giving be
    Uncaught TypeError: Object function () {
    		if (!(this instanceof enyoConstructor)) {
    			throw "enyo.kind: constructor called directly, not using 'new'";
    		// two-pass instantiation
    		var result;
    		if (this._constructor) {
    			// pure construction
    			result = this._constructor.apply(this, arguments);
    		// defer initialization until entire constructor chain has finished
    		if (this.constructed) {
    			// post-constructor initialization
    			this.constructed.apply(this, arguments);
    		if (result) {
    			return result;
    	} has no method 'addDispatchTarget' 
    Anyone else seeing this?
  • The error is getting thrown in UIComponent.js
    controllerChanged: function (p) {
    		var c = this.controller;
    		if (c) {
    			if (enyo.isString(c)) {
    				c = this.controller =[0] == "."? this:, c);
    			if (c) {
    at the addDispatchTarget(this)
  • Did you grab the branch of bootplate-mvc that has the update? It's and it should be merged into master soon.
  • edited August 2013
    Yes that works. Thanks!
  • Okay so the error went away with the bootplate-mvc example but I can't figure out why my app is still reporting Uncaught TypeError: Object function () { etc. (see above.)

    In my app I define the controllers like this:
        , controllers: [
           name: "publicController",
           kind: "Bootplate.ParentController"
        , {
            name: "routes",
            kind: "Bootplate.Routes"
    And evything works fine until I add this controller:
        , {
            name: "authController",
            kind: "Bootplate.HomeController"
    That's when I get the error.

    Here are my controllers (they live in 2 separate files included in the package.js)
      name: "Bootplate.ParentController"
      , kind: "enyo.Controller"
        name: "Bootplate.HomeController"
       , kind: "enyo.Controller"
    So why does adding this controller seem to break things? also taking it out of the controller list isn't enough, I also have to take it out of the package.js.
  • The code above is a simplified example, what I'm actually trying to do is have a common Parent and two child controllers that look like this:
      name: "Bootplate.ParentController"
      , kind: "enyo.ParentController"
      name: "Bootplate.PublicController"
      , kind: "enyo.Controller"
      name: "Bootplate.AuthController"
      , kind: "enyo.ParentController"
    And then in the App, include the PublicController and the AuthController. This was working up until I updated my Enyo libraries earlier this week. I also got a fresh copy of the bootplate-mvc app and haven't been able to replicate this specific issue. So I'm left scratching my head.
  • Can you setup a jsfiddle using nightly that reproduces this? I can't tell without being in the debugger what's happening.
Sign In or Register to comment.