Passing a value binding to a View element

1

I am trying to use a timepicker from my template where starts_at is my model’s attribute.

{{view App.TimePicker value=starts_at id="start-time"}}

So, my Timepicker View uses the jquery UI timepicker library and looks something like this

App.TimePicker = Ember.View.extend
  tagName: false
  templateName: "timepicker"  
  didInsertElement: ->
    Em.run.next =>
      @$('.timer').timepicker

And my timepicker template looks like:

{{input type="text" valueBinding="view.value" class="timer"}}

Essentially I am trying to bind the view’s value to the model’s starts_at so they remain in sync.

However, when I try to render it from the view without an explicit templateName, it doesn’t work. I’m saying something like this.

App.TimePicker = Ember.View.extend
  tagName: "input"
  attributeBindings: ["type"]
  type: "text"
  valueBinding: 'view.value' 
 didInsertElement: ->
    Em.run.next =>
      @$().timepicker

What would be the correct way of passing the starts_at attribute and keeping it up to date in this view? I would want it to be generic so that it would support something like

{{view App.TimePicker value=starts_at id="start-time"}}
{{view App.TimePicker value=ends_at id="end-time"}}
2

Have you tried just doing this {{input type="text" value=view.value class="timer"}}?

3

Yes, that would work. I was just wondering if there would be any way to do this without providing the view with an explicit template and just passing in a dynamic valueBinding inside a view

4

@dipeshgtm I’m just curious why you packed the initialization of the jQuery UI timepicker into a runloop (Ember.run.next)? are there any synchronization drawbacks when placing it directly into the didInsertElement hook?

5

I have failed to understand the Ember Runloop but I have read that it is a general practice to place external JS library codes inside Ember.run.next. As far as my understanding goes, I believe that it is not guaranteed that the DOM element on which the library binds has already been rendered by the time the code to select that DOM element is called. So, Ember.run.next would be scheduling it to run after the element has been inserted/rendered.

Either way, my understanding of the Ember.run is vague. I have read through “the popular” articles and slides on the internet, but I fail to understand how I can play around with things for myself and any real world case where it could be applied. Could you guys also direct me to any good in-depth articles/presentations on the subject?

And as far as this topic goes, I am just curious to how I would do something like this

{{view App.TimePicker for=starts_at id="start-time"}}
{{view App.TimePicker for=ends_at id="start-time"}}

App.TimePicker = Ember.View.extend
  tagName: "input"
  valueBinding: 'view.for'

and bind its changes to the actual starts_at and ends_at for my model.

I have found myself relying to firing observers that set properties on the model by passing a field name instead of a value/binding but it seems very unnatural to me.

App.TimePicker = Ember.View.extend
  _setRecordForModel: (->
    @get('content').set(@for, 'somevalue')
  ).observes('somevalue')