var templateHtml = require( '../templates/dirPickerSettingTemplateRow.html' );

//noinspection JSUnusedGlobalSymbols
var ViewsDirPickerSettingTemplateRow = Backbone.Marionette.LayoutView.extend( {
  /**
   * @type {ModelsDirPickerTemplate}
   */
  model          : undefined,
  template       : templateHtml,
  tagName        : 'tr',
  ui             : {
    name     : '.js-template-name',
    nameInput: '.js-template-name-input',
    path     : '.js-template-path',
    pathInput: '.js-template-path-input',
    delBtn   : '.js-template-del-btn',
    handle   : '.js-template-handle'
  },
  events         : {
    'click @ui.name'        : 'onClickName',
    'keyup @ui.nameInput'   : 'onKeyupNameInput',
    'focusout @ui.nameInput': 'changeNameInput',
    'click @ui.path'        : 'onClickPath',
    'keyup @ui.pathInput'   : 'onKeyupPathInput',
    'focusout @ui.pathInput': 'changePathInput',
    'click @ui.delBtn'      : 'onClickDelBtn'
  },
  modelEvents    : {
    'change': 'render'
  },
  templateHelpers: function () {
    var _self = this;
    //noinspection JSUnusedGlobalSymbols
    return {
      getColoredTemplatePath: function () {

        //今のところは設定済み変数との切り分けはしてません。
        return _.escape( _self.model.get( 'path' ) ).replace( /(&lt;.*?&gt;)/g, "<span class='text-warning'>$1</span>" );
      }
    }
  },

  onRender        : function () {
    //this.ui.handle.tooltip();
  },
  onBeforeDestroy : function () {
    //this.ui.handle.tooltip( 'destroy' );
  },
  onKeyupNameInput: function ( e ) {
    if (e.which == 13) {
      this.changeNameInput();
    }
  },
  onKeyupPathInput: function ( e ) {
    if (e.which == 13) {
      this.changePathInput();
    }
  },
  onClickName     : function () {
    this.ui.name.addClass( 'hide' );
    this.ui.nameInput.removeClass( 'hide' );
    this.ui.nameInput.focus();
    //this.ui.delBtn.addClass( 'hide' );
  },
  onClickPath     : function () {
    this.ui.path.addClass( 'hide' );
    this.ui.pathInput.removeClass( 'hide' );
    this.ui.pathInput.focus();
  },
  onClickDelBtn   : function () {
    this.model.destroy();
  },
  changeNameInput : function () {
    this.model.save( 'name', this.ui.nameInput.val(), {silent: false} );
    //this.model.trigger( 'change' );
  },
  changePathInput : function () {
    this.model.save( 'path', this.ui.pathInput.val(), {silent: false} );
    //this.model.trigger( 'change' );
  }

} );

module.exports = ViewsDirPickerSettingTemplateRow;

@@ -71,16 +71,99 @@
 html' );
+%0Avar dirPickerVariablesCollection = require( '../collections/dirPickerVariables' );
 %0A%0A//noin
@@ -1132,16 +1132,61 @@
 = this;%0A
+    var escapedTagRegexp = /(&lt;.*?&gt;)/g;%0A
     //no
@@ -1288,114 +1288,712 @@
     
-//%E4%BB%8A%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AF%E8%A8%AD%E5%AE%9A%E6%B8%88%E3%81%BF%E5%A4%89%E6%95%B0%E3%81%A8%E3%81%AE%E5%88%87%E3%82%8A%E5%88%86%E3%81%91%E3%81%AF%E3%81%97%E3%81%A6%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%0A        return _.escape( _self.model.get( 'path' ) ).replace( /(&lt;.*?&gt;)/g
+if (dirPickerVariablesCollection) %7B//%E8%A8%AD%E5%AE%9A%E6%B8%88%E3%81%BF%E5%A4%89%E6%95%B0%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%0A          var definedVariableNames = dirPickerVariablesCollection.pluck( 'name' );%0A          return _.escape( _self.model.get( 'path' ) ).replace( escapedTagRegexp, function ( match ) %7B%0A            if (_.find( definedVariableNames, function ( definedVarName ) %7B%0A                  return '&lt;' + definedVarName + '&gt;' == match;%0A                %7D )) %7B%0A              return %22%3Cspan class='text-success'%3E%22 + match + %22%3C/span%3E%22%0A            %7D else %7B%0A              return %22%3Cspan class='text-warning'%3E%22 + match + %22%3C/span%3E%22%0A            %7D%0A          %7D );%0A        %7D%0A        //%E8%A8%AD%E5%AE%9A%E6%B8%88%E3%81%BF%E5%A4%89%E6%95%B0%E3%81%8C%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%0A        return _.escape( _self.model.get( 'path' ) ).replace( escapedTagRegexp
 , %22%3C

Add TemplatePathColor with defined variables