CODEWITHSUNDEEP
ember.js
user655261
user655261

Reputation: 99

Ember js multi text box form

I have started to look at ember js but I am having problems getting my head around the view - template part, if I want one text box to fire a create event this is simple enough I use the insertNewline function on the Ember.TextField view, however most web application require a form to be filled out and submitted when a button is pressed, I can't seen to get the a view working that has multiple text input boxes on it.

I have followed the example on git hub https://github.com/mikecrittenden/tangletube however he seems to be referencing DOM elements directly from the view rather than Binding to properties of the view.

Does anyone have an example of an ember project that uses multi text field forms.

On a side note: There seems to be no standard structure to developing ember applications, every example I have looked at does things completely differently.

Upvotes: 2

Views: 2855

Answers (2)

Tom Whatmore
Tom Whatmore

Reputation: 1327

Here's a very simple example showing two ways of using multiple text fields in a view: http://jsfiddle.net/tomwhatmore/HEaGm/

The first one binds the textfields to their view using viewName, which lets the view access each of them using this.get('whateverYouPutAsViewName').

The second binds the values of the textfields directly to an Ember object, by using valueBinding. Any changes you make to the fields will automatically update the object.

Both have a button which triggers a simple action which use the values to show how they are accessed in the view. Hopefully the code is pretty self-explanatory.

HTML:

<script type="text/x-handlebars">
    {{#view App.HelloView}}
        {{view Ember.TextField viewName="firstName" placeholder="first name"}}
        {{view Ember.TextField viewName="lastName" placeholder="last name"}}
        <button {{action "hello"}}>Say Hello</button>
    {{/view}}

    {{#view App.BoundView}}
        {{#with person}}
            {{view Ember.TextField valueBinding="firstName"}}
            {{view Ember.TextField valueBinding="lastName"}}
        {{/with}}
        <button {{action "hello"}}>Say Hello</button>
    {{/view}}
</script>

JS:

App = Ember.Application.create()

App.HelloView = Ember.View.extend({
    hello: function() {
        alert("Hello " + this.get('firstName').get('value') + " " + this.get('lastName').get('value'));
    }
});

App.Person = Ember.Object.create({
    'firstName': 'John',
    'lastName': 'Doe',

    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.BoundView = Ember.View.extend({
    personBinding: 'App.Person',

    hello: function() {
        alert("hello " + this.get('person').get('fullName'));
    } 
})

Upvotes: 3

Veebs
Veebs

Reputation: 2388

The simple bindings example app on the emberjs site (http://emberjs.com/examples/) has multiple text boxes.

You may also want to checkout the sproutcore 2 (ember's previous name) demo app contest. http://blog.sproutcore.com/announcing-the-winners-of-the-demo-apps-contest/.

Generally speaking, to convert sproutcore 2 to emberjs, just change the SC namespace to Ember.

Upvotes: 0

Related Questions