(function(app) {
  'use strict';

  var jCore = require('jcore');
  var helper = app.helper || require('../helper.js');
  var dom = app.dom || require('../dom.js');

  var ModulePort = helper.inherits(function(props) {
    ModulePort.super_.call(this);

    this.label = this.prop(props.label);
    this.name = this.prop(props.name);
    this.type = this.prop(props.type);
    this.plugDisabled = this.prop(props.plugDisabled);
    this.socketDisabled = this.prop(props.socketDisabled);
    this.visible = this.prop(false);
    this.top = this.prop(0);
    this.height = this.prop(44);
    this.socketConnected = this.prop(false);
    this.labelHighlighted = this.prop(false);
    this.plugHighlighted = this.prop(false);
    this.socketHighlighted = this.prop(false);
    this.listItemElement = this.prop(this.renderListItem());
    this.parentListElement = this.prop(props.parentListElement);
    this.optionElement = this.prop(this.renderOption());
    this.parentOptGroupElement = this.prop(props.parentOptGroupElement);
    this.cache = this.prop({});

    this.optionDeselector = props.optionDeselector;
    this.optGroupSorter = props.optGroupSorter;

    // update the list-item element or the option element
    this.markDirty();
  }, jCore.Component);

  ModulePort.prototype.hideable = function() {
    // don't hide label-highlighted port
    return !this.labelHighlighted();
  };

  ModulePort.prototype.bottom = function() {
    return this.top() + this.height();
  };

  ModulePort.prototype.renderListItem = function() {
    var element = dom.el('<div>');

    dom.addClass(element, 'module-port');
    dom.data(element, 'type', this.type());

    var texts = [];

    if (!this.plugDisabled())
      texts.push('<div class="module-port-plug"></div>');

    if (!this.socketDisabled())
      texts.push('<div class="module-port-socket"><span></span></div>');

    texts.push('<div class="module-port-label">' + this.label() + '</div>');
    texts.push('<img class="module-port-hide-button" src="images/minus-square-o.svg">');

    dom.html(element, texts.join(''));

    return element;
  };

  ModulePort.prototype.renderOption = function() {
    var element = dom.el('<option>');
    dom.text(element, this.label());
    dom.value(element, this.name());
    return element;
  };

  ModulePort.prototype.redraw = function() {
    var visible = this.visible();
    var top = this.top();
    var socketConnected = this.socketConnected();
    var labelHighlighted = this.labelHighlighted();
    var plugHighlighted = this.plugHighlighted();
    var socketHighlighted = this.socketHighlighted();
    var hideable = this.hideable();
    var cache = this.cache();

    if (visible !== cache.visible) {
      if (visible) {
        dom.remove(this.optionElement());
        dom.append(this.parentListElement(), this.listItemElement());
      } else {
        dom.remove(this.listItemElement());
        dom.append(this.parentOptGroupElement(), this.optionElement());
      }
      this.optGroupSorter(this.type());
      this.optionDeselector();
      cache.visible = visible;
    }

    if (top !== cache.top) {
      var translate = 'translateY(' + top + 'px)';
      dom.css(this.listItemElement(), {
        transform: translate,
        webkitTransform: translate
      });
      cache.top = top;
    }

    if (socketConnected !== cache.socketConnected) {
      dom.toggleClass(this.listItemElement(), 'module-port-socket-connected', socketConnected);
      cache.socketConnected = socketConnected;
    }

    if (labelHighlighted !== cache.labelHighlighted) {
      dom.toggleClass(this.listItemElement(), 'module-port-highlight', labelHighlighted);
      cache.labelHighlighted = labelHighlighted;
    }

    if (plugHighlighted !== cache.plugHighlighted) {
      dom.toggleClass(this.listItemElement(), 'module-port-plug-highlight', plugHighlighted);
      cache.plugHighlighted = plugHighlighted;
    }

    if (socketHighlighted !== cache.socketHighlighted) {
      dom.toggleClass(this.listItemElement(), 'module-port-socket-highlight', socketHighlighted);
      cache.socketHighlighted = socketHighlighted;
    }

    if (hideable !== cache.hideable) {
      dom.toggleClass(this.listItemElement(), 'module-port-hide-disabled', !hideable);
      cache.hideable = hideable;
    }
  };

  ModulePort.TYPE_PROP = 'prop';
  ModulePort.TYPE_EVENT = 'event';

  ModulePort.PLUG_OFFSET_X = 261;
  ModulePort.PLUG_WIDTH = 50;

  ModulePort.SOCKET_OFFSET_X = -25;
  ModulePort.SOCKET_WIDTH = 50;

  if (typeof module !== 'undefined' && module.exports)
    module.exports = ModulePort;
  else
    app.ModulePort = ModulePort;
})(this.app || (this.app = {}));

@@ -1656,37 +1656,36 @@
 ));%0A
-%0A
     
-var texts = %5B%5D;%0A%0A
+dom.html(element,%0A  
     
-if 
 (!th
@@ -1701,35 +1701,19 @@
 sabled()
-)%0A      texts.push(
+ ? 
 '%3Cdiv cl
@@ -1742,26 +1742,30 @@
 %3E%3C/div%3E'
-);%0A
+ : '') +
 %0A    
-if
+ 
  (!this.
@@ -1784,27 +1784,11 @@
 ed()
-)%0A      texts.push(
+ ? 
 '%3Cdi
@@ -1840,27 +1840,23 @@
 iv%3E'
-);%0A%0A    texts.push(
+ : '') +%0A      
 '%3Cdi
@@ -1914,26 +1914,17 @@
 iv%3E'
-);
+ +
 %0A    
-texts.push(
+  
 '%3Cim
@@ -1994,48 +1994,13 @@
 g%22%3E'
-);%0A
 %0A    
-dom.html(element, texts.join('')
 );%0A%0A

Refactor code of constructing list-item element of port