как связать переменную типа базы в JsViews пользовательского тега

Question

Я использую JsViews + spectrumjs colorpicker и я должен был создать пользовательский тег, как это:

$.views.tags({ 
    spectrum : { 
     template : "<input/>", 
     onAfterLink : function (tagCtx, linkCtx) { 
      var tag = this; 
      var props = tagCtx.props; 
      var options = { 
       color : tagCtx.args[0] 
      }; 
      var linkedElem; 
      if (tag._.unlinked) { 
       if (!tag.linkedElem) { 
        tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem); 
       } 
       linkedElem = tag.linkedElem; 
       $.each(props, function (key, prop) { 
        var option; 
        if (key.charAt(0) === "_") { 
         key = key.slice(1); 
         options[key] = prop; 
        } 
       }); 
       this.linkedElem.spectrum(options); 
      } 
     }, 
     onUpdate : function() { 
      return false; 
     }, 
     onDispose : function() { 
      this.linkedElem.spectrum("destroy"); 
     } 
    } 
}); 

Он работает см example, но мне нужно динамически обновлять цвет. В spectrumjs есть событие move.spectrum и подписаться на него так:

tag.spectrum = tag.linkedElem.spectrum(options); 
tag.spectrum.on("move.spectrum", $.proxy(tag.moveEvent, tag)); 

И добавить обработчики:

moveEvent : function (e, val) { 
    // update model.color 
    console.log(val.toRgbString()); 
    this.linkedElem.val(val.toRgbString()); 
}, 

onDispose : function() { 
    this.spectrum.off("move.spectrum", $.proxy(this.moveEvent, this)); 
    this.spectrum.spectrum("destroy"); 
} 

См example. Так что я не пробовал, я не могу отслеживать изменения или применить изменения к model.color becose цвета базового типа string

Update

Я сделал example без использования пользовательских тегов, как все должно работать.

Answer 1

Вот обновление вашего примера страницы: https://jsfiddle.net/BorisMoore/g4vs23v1/5/

Я изменил код onAfterLink следующим образом:

onAfterLink : function (tagCtx, linkCtx) { 
    var tag = this; 
    var props = tagCtx.props; 
    var options = { 
     color: tagCtx.args[0] 
    }; 
    var linkedElem; 
    if (tag._.unlinked) { 
     if (!tag.linkedElem) { 
      tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem); 
     } 
     linkedElem = tag.linkedElem; 
     $.each(props, function (key, prop) { 
      var option; 
      if (key.charAt(0) === "_") { 
       key = key.slice(1); 
       options[key] = prop; 
      } 
     }); 
     tag.spectrum = linkedElem.spectrum(options); 
     //tag.spectrum.on("move.spectrum", $.proxy(tag.moveEvent, tag)); 
     linkedElem.on("move.spectrum", $.proxy(tag.moveEvent, tag)); 
    } else { 
     tag.linkedElem.spectrum("set", options.color); 
    } 
}, 

Конкретно я исправил связывание move.spectrum следующим

linkedElem.on("move.spectrum", $.proxy(tag.moveEvent, tag)); 

И когда цвет обновляется наблюдаемым, например, изменяя строку "rgb(...)" в текстовом поле, новое значение должно быть установлено на s pectrum тег, который происходит на этой линии:

tag.linkedElem.spectrum("set", options.color); 

Итак, теперь вы должны иметь двустороннюю привязку между связывания с color входом и входом связывания с {{spectrum}} тега.