Ember.js input-Felder

Ist es möglich, mit standard HTML5 input-Felder in einer Ember.js Ansicht, oder sind Sie gezwungen, die Nutzung der begrenzten Auswahl vordefinierter in Bereichen wie Ember.TextField, Ember.CheckBox, Ember.TextArea und Ember.wählen Sie? Ich kann nicht scheinen, um herauszufinden, wie zu binden, werden die Eingaben zu den Ansichten, die ohne die Verwendung der eingebauten Ansichten wie:

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

Speziell, ich bin in der Notwendigkeit einer numerischen Feld. Irgendwelche Vorschläge?

InformationsquelleAutor reptilicus | 2013-01-22

  1. 22

    EDIT: Das ist jetzt aus dem Datum, an dem Sie alles erreichen können, was oben mit dem folgenden:

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

    Veraltete Antwort

    Können Sie nur den Typ angeben, verwenden Sie für ein TextField

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

    Wenn Sie wollen, um den Zugriff auf die extra Attribute auf das Feld Nummer können Sie nur Unterklasse Ember.TextField.

    App.NumberField = Ember.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step']
})

Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
    im ernst, Ihr das einfach???
    Willkommen bei Ember, ich hoffe, Sie genießen Ihren Aufenthalt.
    Guter Herr, es funktioniert. Würde ich heiraten Ember.js wenn Sie kam, mit einer besseren Dokumentation.
    Wir sind immer auf der Suche zur Verbesserung der Dokumentation. Obwohl, humorvoll, diese Funktionalität ist dokumentiert: emberjs.com/api/classes/Ember.TextField.html unter der überschrift "HTML-Attribute"
    das ist becaused Wert ist eine berechnete Eigenschaft im inneren Glut.TextField, wenn Sie die manuelle Einstellung der Wert auf dem Eingang gibt es keine Notwendigkeit zu verwenden App.NumberField überhaupt nur die <input auf der Seite. Mehr wahrscheinlich, Sie brauchen, um einen default-Wert, um das Kontext-Objekt sichern den Eingang, als alles andere

    InformationsquelleAutor Bradley Priest

  2. 4

    @Bradley Priester, die Antwort oben ist korrekt, das hinzufügen von Typ=Nummer funktioniert. Ich fand heraus, aber dass müssen Sie einige Attribute an die Glut.TextField-Objekt, wenn Sie brauchen, Dezimalzahlen Eingabe oder wollen, geben Sie min/max-Eingabe-Werte. Ich habe gerade verlängert Ember.TextField hinzufügen, dass einige Attribute auf das Feld:

    //Add a number field
App.NumberField = Ember.TextField.extend({
    attributeBindings: ['name', 'min', 'max', 'step']
});

    In der Vorlage: 

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

    et voile!

    Yep, ich erwähnte dies in der zweiten Hälfte meiner Antwort...

    InformationsquelleAutor reptilicus

  3. 4

    Hier mein gut getippt nehmen :

        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')
    });

    Ich benutze es so:

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

    Den anderen Systemen, wo die Propagierung von strings in Anzahl typisierter Felder.

    InformationsquelleAutor nraynaud

  4. 1

    Vielleicht möchten Sie auch, um zu verhindern, dass Menschen von der Eingabe alle alten Briefe:

    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;
    })  
  }
})

    Kredit wo seine due: ich erweiterte nraynaud Antwort

    InformationsquelleAutor nont

  5. 1

    Dies ist, wie ich tun würde, jetzt (derzeit Ember 1.6-beta5) mit den Komponenten (unter Verwendung der Ideen von @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)

    Dann, um es in einer Vorlage:

    number-field numericValue=someProperty

    InformationsquelleAutor neverfox

Schreibe einen Kommentar