jqueryjsviewslost-focuscustom-tag

JSView - Set trigger, when loses focus, on custom tag


I'm trying to define a custom tag for input-elements, which only trigger, when the input-element lost focus. When it triggers, it should modify the data-linked item. The data-manipulation is working onAfterChange.

//jsview html tag
<script id="input_text_layout" type="text/x-jsrender">
      <input type="text" data-link="{:value:} {testvalidation value}">
    </script>

//jQuery Part
$.views.tags({
  testvalidation: {
    baseTag: "radiogroup",
    linkedElement: "select,textarea,input",
    init: function(tagCtx, linkCtx, ctx) {
      var tag = this;
    },
    onAfterChange : function(ev, eventArgs) {
      $.observable(this.linkCtx.view.data).setProperty("info_text", "Testinformation");
    }
}
});

})(this.jQuery);

Solution

  • You can set trigger=false if you want updates to be triggered on the blur event, rather than on keydown/input. The setting can be global, on the individual tag, or in the tag definition.

    See

    Setting trigger=false on the tag definition for a custom tag looks like this (your tag):

    testvalidation: {
      linkedElement: "input",
      trigger: false,
      onAfterChange : function(ev, eventArgs) {
        $.observable(this.linkCtx.view.data).setProperty("info_text", "Testinformation");
      }
    }
    

    or this one from http://www.jsviews.com/#samples/tag-controls/simple-textbox:

    textbox: {
      linkedElement: "input",
      template: "<input/>",
      onUpdate: false,
      trigger: false,
      dataBoundOnly: true
    }