Search code examples
javascriptjsonractivejs

Key is showing Promise as a value after firing ractive.set

I'm trying to change the values inside the a JSON object using ractive.on and ractive.set. Basically it will get the values inside the input element(with ractive variables) and assign them to there respective keys after pressing the anchor element with a on-click event. Instead of showing the proper values it shows Promise instead. I have attach an image for reference.

https://jsfiddle.net/clestcruz/L38tsud7/

enter image description here

<body>

  <div id='container'></div>

  <script id='template' type='text/ractive'>

      <p>Provide the company information for the:</p>

      <label>Company Name <span class="required">*</span></label>
      <input type="text" class="form-text full-width" placeholder="Enter the company name" id="accountName" value="{{leadData.accountName}}"/>



      <label>Street Name.</label>
      <input type="text" class="form-text" placeholder="-" id="streetName" value="{{leadData.streetName}}"/>

      <a class="button cta" on-click="addLead">Create Account</a>


  </script>

  <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

  <script>

      var app = new Ractive({
        el       : '#container',
        template : '#template',
    });

     var data = {
        'accountName'   : app.get('leadData.accountName'),
        'streetName'    : app.get('leadData.streetName'),
     }


      app.on('addLead', function(event) {
         var data = {
           'accountName'   : app.set('leadData.accountName'),
           'streetName'    : app.set('leadData.streetName'),
         }
         console.log(data);
      });

  </script>


</body>
Solution

  • What you probably mean is app.get and not app.set. In addition, event handlers execute in the context of the instance. That means you do not require a reference to the instance with an external variable (in this case, app). You can simply use this.

    app.on('addLead', function(event) {
  var data = {
    accountName: this.get('leadData.accountName'),
    streetName: this.get('leadData.streetName'),
  }
  // Do other stuff with data
});