Wie erstelle ich eine Komponente, die erzeugt Radio-buttons Ember.js?

Kann ich und sollte ich das übergeben von arrays an Komponenten in ember?

Zum Beispiel, wenn ich wollte-Vorlage-etwas, das macht ein paar radiobuttons mit den Bezeichnungen:

<label for="media">Media</label><input type="radio" name="entry.1602323871" value="media" id="media" />
<label for="guest">Guest</label><input type="radio" name="entry.1602323871" value="guest" id="guest" />

Konnte ich irgendwie übergeben wird ein array mit diesem Inhalt und Schleife durch.

Media, media
Guest, guest
InformationsquelleAutor Himmators | 2013-11-28
  1. 22

    Yeah, übergeben Sie nichts auf die Komponenten. Nur ein Versuch, um die radio-buttons

    //Basic radio Component
App.RadioButton = Ember.Component.extend({
  tagName : "input",
  type : "radio",
  attributeBindings : [ "name", "type", "value", "checked:checked" ],
  click : function() {
    this.set("selection", this.$().val());
  },
  checked : function() {
    return this.get("value") === this.get("selection");
  }.property('selection')
});
Em.Handlebars.helper('radio-button',App.RadioButton);

    Aktualisiert (component-name sollte dasherized)

    Arbeiten Radio Demo

    • Hoffe, das hilft 🙂
    • Erstaunlich erstaunlich!
    • Es wäre besser, Sie ändern den Titel, um etwas im Zusammenhang mit radio-Taste, wie es anderen helfen kann zu
    • Wie bekommt man den Wert auf "Absenden"?
    • href="http://jsfiddle.net/selvaG/ydumF/2/" >jsfiddle.net/selvaG/ydumF/2
    • wie würde das funktionieren, wenn es mehrere Sätze von radio-buttons und Ihre id/Werte dynamisch sind? Siehe: jsfiddle.net/SLfWD
    • Du musst durch den Namen und die Auswahl auf die radios. Aktualisiert fiddle jsfiddle.net/selvaG/SLfWD/1
    • Ich finde einige tym und machen die Radio Komponente mehr generische früher. Würde erwarten, dass diese Funktionalität wird verfügbar sein, in Glut-Kern

    InformationsquelleAutor selvagsz
  2. 2

    Es ist jetzt ein klein wenig leichter zu bekommen, radio-buttons in dein Projekt (wenn du mit ember-cli) durch die Verwendung der ember-radio-Tasten addon

    Installieren: 

    npm install ember-radio-buttons --save-dev

    Verwendung: 

    {{radio-button value='one' checked=selectedNumber}}
{{radio-button value='two' checked=selectedNumber}}
    InformationsquelleAutor real_ate
  3. 1

    Upped @selva-G ' s Antwort.

    Ich fand, dass mit der Schaltergruppe Komponente von Bootstrap-für-Ember ist tatsächlich sauberer.
    Hier ist, was ich getan habe:

    Meiner Ansicht Vorlage:

    <script type="text/x-handlebars" data-template-name="myview">
    {{bs-btn-group contentBinding="things" selectedBinding="selectedThing"}}
</script>

    In diesem view-controller (was nicht unbedingt brauchen, um einen ArrayController, vielmehr kann eine generische Ember-Controller):

    App.MyviewController = Ember.ArrayController.extend({
    things: [
        Ember.Object.create({value: 'first', title: 'First Thing'}),
        Ember.Object.create({value: 'second', title: 'Second Thing'}),
        Ember.Object.create({value: 'third', title: 'Third Thing'})
    ],
    selectedThing: 'second'
    selection: function() {
        console.log(this.get('selectedThing');
    }.observes('selectedThing')
});
    InformationsquelleAutor ashraf
Schreibe einen Kommentar