Ember.js les champs de saisie

Est-il possible d'utiliser le standard HTML5 champs de saisie dans un Ember.js vue, ou êtes-vous obligé d'utiliser la sélection limitée de construit dans des domaines comme la Braise.TextField, De Braise.Case, De Braise.TextArea, et de Braise.sélectionnez? Je n'arrive pas à comprendre comment faire pour lier les valeurs d'entrée pour les points de vue sans l'aide de l'vues comme:

Input: {{view Ember.TextField valueBinding="objectValue" }}

Plus précisément, je suis dans le besoin d'un champ numérique. Toutes les suggestions?

OriginalL'auteur reptilicus | 2013-01-22

ember.js input

22

EDIT: C'est maintenant hors de date, vous pouvez réaliser tout ce que ci-dessus avec les éléments suivants:

{{input value=objectValue type="number" min="2"}}

Réponse dépassée

Vous pouvez simplement spécifier le type TextField
```
Input: {{view Ember.TextField valueBinding="objectValue" type="number"}}
```
Si vous souhaitez accéder à des attributs supplémentaires d'un certain nombre de champ, vous pouvez simplement sous-classe Ember.TextField.
```
App.NumberField = Ember.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step']
})

Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
```
sérieusement, c'est facile???
Bienvenue à la Braise, j'espère que vous apprécierez votre séjour.
Bon dieu, il fonctionne. J'avais marier Ember.js si elle est venue avec une meilleure documentation.
Nous cherchons toujours à améliorer la documentation. Bien que, avec humour, cette fonctionnalité est documenté: emberjs.com/api/classes/Ember.TextField.html, sous la rubrique "Attributs HTML"
c'est arriver; la valeur est une propriété calculée à l'intérieur de Braise.TextField, si vous êtes réglage manuel de la valeur sur l'entrée il n'y a pas besoin d'utiliser l'App.Champnombre à tous vient de mettre le <input sur la page. Plus probablement, vous devez donner une valeur par défaut à l'objet de contexte de soutien à l'entrée qu'à autre chose

OriginalL'auteur Bradley Priest
4

@Bradley Prêtre de la réponse ci-dessus est correcte, en ajoutant type=numéro ne fonctionne pas. J'ai trouvé, cependant, que vous devez ajouter des attributs à la Braise.Objet TextField si vous avez besoin des nombres décimaux entrée ou souhaitez spécifier min/max des valeurs d'entrée. Je vient de prolonger de Braise.TextField pour ajouter des attributs à la matière:
```
//Add a number field
App.NumberField = Ember.TextField.extend({
    attributeBindings: ['name', 'min', 'max', 'step']
});
```
Dans le modèle:
```
{{view App.NumberField type="number" valueBinding="view.myValue" min="0.0" max="1.0" step="0.01" }}
```
et voile!

Yep, je l'ai mentionné lors de la deuxième moitié de ma réponse...

OriginalL'auteur reptilicus

Voici mon bien tapé prendre sur elle :

    App.NumberField = Ember.TextField.extend({
        type: 'number',
        attributeBindings: ['min', 'max', 'step'],
        numericValue: function (key, v) {
            if (arguments.length === 1)
                return parseFloat(this.get('value'));
            else
                this.set('value', v !== undefined ? v+'' : '');
        }.property('value')
    });

Je l'utilise de cette façon:

{{view App.NumberField type="number" numericValueBinding="prop" min="0.0" max="1.0" step="0.01" }}

Les autres systèmes où la multiplication des chaînes en nombre tapé champs.

OriginalL'auteur nraynaud

Vous pouvez également empêcher les gens d'avoir à taper des vieilles lettres là:

App.NumberField = App.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step'],
  numbericValue : function (key,v) {
    if (arguments.length === 1)
      return parseFloat(this.get('value'));
    else
      this.set('value', v !== undefined ? v+'' : '');
  }.property('value'),
  didInsertElement: function() {
    this.$().keypress(function(key) {
      if((key.charCode!=46)&&(key.charCode!=45)&&(key.charCode < 48 || key.charCode > 57)) return false;
    })  
  }
})

De crédit où son dû: j'ai étendu nraynaud la réponse de

OriginalL'auteur nont

C'est comment je pourrais le faire maintenant (actuellement Braise 1.6-beta5) à l'aide de composants (en utilisant les idées de @nraynaud & @nont):

App.NumberFieldComponent = Ember.TextField.extend
  tagName: "input"
  type: "number"

  numericValue: ((key, value) ->
    if arguments.length is 1
      parseFloat @get "value"
    else
      @set "value", (if value isnt undefined then "#{value}" else "")
  ).property "value"

  didInsertElement: ->
    @$().keypress (key) ->
      false  if (key.charCode isnt 46) and (key.charCode isnt 45) and (key.charCode < 48 or key.charCode > 57)

Puis, à l'inclure dans un modèle:

number-field numericValue=someProperty

OriginalL'auteur neverfox

Vous devez vous connecter pour publier un commentaire.

Réponse dépassée