alpaca.jsのトークンフィールドによるフォームのリセット

Question

alpaca.jsのトークンフィールドを使用してフォームを適切にリセットする方法を試してみました。

これがバグか、間違っているかどうかわかりません。私は2つのリセットボタンを配置しました。一般的なものと2番目のものは、フォームをリセットする機能を呼び出します。

<script type="text/javascript"> 
var value = {}; 
$("#myform").alpaca({ 
"schema": { 
    "title": "token field", 
    "type": "object", 
    "properties": { 
     "text_field": {"type": "text" }, 
     "token_field": { "type": "token"}, 
    }      
}, 
"options": { 
    "fields": { 
      "text_field": { 
        "label": 'this is a text field', 
        "type": "text" 
      }, 
      "token_field": { 
        "label": 'this is a token field', 
        "type": "token", 
          "tokenfield": { 
        }, 
      }, 
    }, 
    "form": { 
      "buttons": { 
      "load": { 
        label:"load saved values", 
        "click": function() { 
          $('form#' + this.attributes.id)[0].reset(); 
          this.setValue(value); 
        },  
      }, 
      "reset": {}, 
      "fancy_reset": { 
        "label": "reset with function", 
        "click": function() { 
          console.log(this.attributes.id); 
          $('form#' + this.attributes.id)[0].reset(); 
        }, 
      }, 
      "save": { 
        label:"save", 
        "click":function(){ 
          value = this.getValue(); 
          console.log(this.getValue()); 
          console.log(value); 
        }, 
      }, 
      }, 
    }, 
}, 
}); 
</script> 

ここで何が間違っているのかについての洞察はありますか？

Answer 1

私は年間アルパカを使っていましたが、そのタイプを使用していませんでしたが、いくつかの研究の後で、アルパカのlibにそのタイプのフィールドをリセットする解決策が見つかりませんでしたので、jqueryおよびbootstrap tokenizer methods。

と私は、このソリューションに来ました：

： this.setValue(value)このコードを追加した後

1. はリセットフォームイベントごload機能で

   $('form').on('reset', function(e) { 
       var control = $("#myform").alpaca("get"); 
       var field = control.childrenByPropertyId['token_field']; 
       field.refresh(); 
   }); 
   

2. へのEventListenerを作成します。

   if (typeof value.token_field != undefined) { 
       // getting Alpaca parent control (this holds everything) 
       var control = $("#myform").alpaca("get"); 
   
       // get the token field 
       var field = control.childrenByPropertyId['token_field']; 
   
       // setting the saved token to the field using bs-tokenizer method setTokens 
       $(field.control).tokenfield('setTokens', value.token_field); 
   } 
   

ここにはfiddleがあります。 まだ問題がある場合は教えてください。