jeudi 1 octobre 2015

How can I create data-driven text inputs with Ember?

I am trying to create several inputs that update my Ember Data model immediately, without a submit action. E.g.

Person
First Name  [Placeholder: Enter first name ]
Last Name   [Placeholder: Enter last name  ]
City        [Placeholder: Enter city       ]

I’ve approached this by creating a wrapper component around an Ember TextField subclass component, and have gotten it to work, kind of, but with two major problems:

  1. Placeholders don't work as I tried to implement them (see below) — seems I could do this a lot more easily using the TextSupport mixin, but I don't know how to use it.
  2. I don't like the way I am sending change actions up to the route, which is basically like this:

Within a top-level component {{person-view action="modifyPersonInternals"}} I have my wrapper components as follows:

{{editable-property property="firstName" action="updateFirstName"}}
{{editable-property property="lastName" action="updateLastName"}}
{{editable-property property="city" action="updateCity"}}

When the user edits the firstName, the TextField component calls updateFirstName on the editable-property wrapper component with a parameter (the new value); the wrapper component in turn calls modifyPersonInternals on the route with two parameters (the property to modify, and the new value). This works but seems clunky/hacky and can't be the right approach, can it?

Also, here's my unsuccessful attempt to implement a placeholder in editable-property.js,

hasEmptyProperty: Ember.computed(function() {
    return ((this.get('property') === "") || (this.get('property') === null));
})

and in editable-property.hbs:

{{#if hasEmptyProperty}}
<div class="placeholder" {{action "editProperty"}}>{{placeholder}}</div>
{{else}}
<div {{action "editProperty"}}>{{bufferedProperty}}</div>
{{/if}}

I get an error that hasEmptyProperty is not defined.

Aucun commentaire:

Enregistrer un commentaire