Home/ Questions/Q 6391931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T03:44:55+00:00

In my app, the <body> tag contains just a single <script type=text/x-handlebars> tag which

  • 0

In my app, the <body> tag contains just a single <script type="text/x-handlebars> tag which contains all my views. Sproutcore 2.0 nicely adds a jQuery on-document-ready handler that parses those templates and renders them back into the DOM.

I’d like to call a function on one of the views as soon as it’s rendered. The problem is that the re-insertion happens asynchronously, so I don’t know when the view is available.

Example

Page

<body>
  <script type="text/x-handlebars">
    ...
    {{view "MyApp.TweetInputView"}}
    ...
  </script>
</body>

View:

MyApp.TweetInputView = SC.View.extend({
  init: function() {
    // act like a singleton
    MyApp.TweetInputView.instance = this;
    return this._super();
  },
  focus: function() {
    ...
    this.$().focus();
  }
});

Initializer

// if the URL is /tweets/new, focus on the tweet input view
$(function() {
  if (window.location.pathname === '/tweets/new') {
    // doesn't work, because the view hasn't been created yet:
    MyApp.TweetInputView.instance.focus();
  }
});

I’ve also tried SC.run.schedule('render', function() { MyApp.TweetInputView.instance.focus(); }, 'call'); in the hopes that Sproutcore would run that after all the view rendering and insertion, but that does not seem to be the case.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    MyApp.TweetInputView = SC.View.extend({
  didInsertElement: function() {
    console.log("I've been rendered!");
  }
});
    • 0