Error: Can't select in removed DomRange

[frabrunelle]

Awesome package! I am using it in a new app I am building and I like it a lot :smile:

I use FlowRouter and I noticed that when I call a function such as FlowRouter.go('/dashboard') or I click a link to go to another page, I get the following error in the console:

Exception from Tracker afterFlush function:
debug.js:41 Error: Can't select in removed DomRange
    at DOMRange.$ (domrange.js:408)
    at Blaze.TemplateInstance.$ (template.js:292)
    at ViewModel.<anonymous> (viewmodel.es6.js.js:232)
    at view.js:199
    at Function.Template._withTemplateInstanceFunc (template.js:457)
    at view.js:197
    at Object.Blaze._withCurrentView (view.js:538)
    at viewAutorun (view.js:196)
    at Tracker.Computation._compute (tracker.js:323)
    at new Tracker.Computation (tracker.js:211)

Are you aware of this issue? I'll continue using your package, but it would be nice to have this fixed :smile:

Thank you!

And :+1: for having the package on Atmosphere!!

[dalgard]

Thanks for your interest. Since very few people have used the package so far, any input is much appreciated – feel free to create as many issues as you like with feature requests or bugs (I don't suspect there will be many, since the code is quite simple).

I'm using the package with FlowRouter myself, so I wonder what could be the issue in you case... I'll look into it.

In regard to Atmosphere, I'm taking care of it right now.

[dalgard]

Is the error gone in version 0.5.2? There was definitely a bug – can't believe I missed it before.

I'm pushing the package to Atmosphere shortly, btw.

[frabrunelle]

I just upgraded and the bug is still there.

Basically I have a file named register-bind.js in my client folder that contains:

ViewModel.registerHelper("bind");

And I have the following code in one of my templates:

 <div class="form-group row" style="margin-bottom: 0">
  <div class="col-sm-9 col-sm-offset-3">
    <div class="checkbox" style="margin-top: 15px; margin-bottom: 0;">
      <label>
        <input type="checkbox" {{bind 'checked: show'}} required> I agree to the <a href="#terms" data-toggle="modal">Terms and Conditions</a>
      </label>
    </div>
  </div>
</div>
{{#if show}}
  <div class="form-group row" style="margin-bottom: 0">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-secondary" style="margin-top: 30px">Register</button>
    </div>
  </div>
{{/if}}

[dalgard]

I can't reproduce the error, but I have some notion about where to look. Could you possibly send me a bit more code?

You're using the library correctly, so this is definitely an important bug to nail.

[frabrunelle]

Alright, I've uploaded my repo to GitHub: https://github.com/frabrunelle/satoshiportal :smile:

But I'll probably remove it in a few days because it's not supposed to be open source (there is almost no code for now so it's okay).

Please try running it and see if you are able to find the bug! Thanks again :smiley:

[dalgard]

Awesome – taking a look now. (I'm pushing to Atmosphere once this bug is fixed.)

[dalgard]

Finally found the problem, thank god – I was beginning to go a little bit crazy... Still don't see how your code would be different from mine, though – but thanks for lending me your code base.

Having seen your controller files (such as register.js) I believe you could reduce your code with 60-70 % if you apply the viewmodel pattern and bindings such as submit instead of Blaze.

I'm going to push version 0.5.3 to Atmosphere and will let you know.

[dalgard]

Here you go. Just remove the /packages folder from your project, then it should work.

[frabrunelle]

Awesome, thanks a lot!!! I was using METEOR@1.2-rc.7 so maybe that was the difference with your code?

Having seen your controller files (such as register.js) I believe you could reduce your code with 60-70 % if you apply the viewmodel pattern and bindings such as submit instead of Blaze.

That would be great! I'll try to figure it out but it would be super helpful to have an example of submitting a form with ViewModel. I kinda of understand the documentation (https://github.com/dalgard/meteor-viewmodel#submit-send) but it would be clearer with an example :smile: There are a few in the examples folder but none of them involve submitting a form.

And thanks for uploading it to Atmosphere! I just updated to 0.5.4 :smiley:

[dalgard]

One of the things that tripped me in my debugging endeavors was that after the first hot code push with your project, Meteor started to reload and reload. I had to stop the server and restart it, in order for my changes to apply... which took me some time to realize.

I'll happily rewrite your code for you in order to demonstrate how the VM pattern works, just didn't want to seem officious about it, as your code is yours and is basically fine the way it is.

However, it's 10 minute's work for me, since I've authored the thing myself, and will allow me to test my own library somewhat – let me get back to you with a pull request or something.