CODEWITHSUNDEEP
javascriptember.js
nullnullnull
nullnullnull

Reputation: 8189

Associating a view with a form in Ember.js

I have a form with several fields. When a user clicks on one of the fields, a div to the side of the form is filled with info about that field and how to best fill it out. This info div is actually a view, and I populate it with the help text by assigning each field a tip attribute. The code looks like this:

# form field
Em.TextField valueBinding="name" tip="Put the <strong>name</strong> of your organization here."

# views
# Tip Box
Whistlr.TipBoxView = Em.View.extend
  templateName: 'tipBox'
  classNames: ['ember-tip-box']
  content: ""

  actions:

    setContent: (content) ->
      @set 'content', content

# Text field
Em.TextField.reopen
  tip: ''

  click: ->
    Ember.View.views[$(".ember-form-info-box").attr('id')].set 'content', @tip

# template
== view.content

This works well enough, but one part of it really bothers me. Specifically, in order to find the tip box view, I search for it like so: Ember.View.views[$(".ember-form-info-box").attr('id')]. This works so long as I only have a single form with a single tip view, but it would break if I had multiple ones. This isn't a problem right now, but might present issues in the future. It also feels hacky.

Is there a more direct way to associate a view with a specific form?

Upvotes: 0

Views: 49

Answers (1)

chopper
chopper

Reputation: 6709

This seems like an overly complicated way of doing this. Why don't you use something like jQuery Tooltipster or CSS Tooltips?

Upvotes: 1

Related Questions