Sonntag, Dezember 15, 2019

Wie übergibt man Parameter mit der Aktion Helfer Ember.js innen ein input-Feld aus einer LENKER-Vorlage?

In meinem LENKER Vorlage habe ich diese Schleife:

{{#each itemController="fund"}}
    <li>                        
        <label>{{title}}</label>            
        <span>{{amount}}</span>
        {{input type="text" placeholder="new user"
        value=newFullName action="createUser"}}
        {{partial 'user-list'}}
    </li>
{{/each}}

und übergeben zu müssen, das aktuelle Objekt als parameter für den ‚createUser‘ action.
So etwas wie dieses:

action="createUser(this)"

oder:

action 'createUser' this

Aber es scheint, dass ember nicht verarbeiten können Parameter für die Aktionen, die innerhalb einer input-Feld…

Bin ich etwas fehlt?

  • Wie Sie Ihre „Aktion“ ausgeführt werden, dann? In der Regel müssen Sie etwas wie event=“click“ oder ein anderer Weg für den Aufruf der Aktion.
  • Die Standardeinstellung ist, dass die Aktion aufgerufen wird eingeben.
  • Ich bin stecken mit einem ähnlichen problem! Ember tutorial (guides.emberjs.com/v2.4.0/tutorial/autocomplete-component) hat {{input value= “ filter-Taste-hoch=(Aktion ‚autoComplete‘ – filter)}} das funktioniert nicht, brennen „Eine Aktion mit dem Namen ‚autoComplete‘ wurde nicht gefunden in der (generierten index-controller)“.
  • Dies ist jetzt möglich – siehe meine Antwort unten

4 Kommentare

  1. 7

    Ich denke, dass das nicht möglich ist, dies zu tun mit der action Eigenschaft von input view Helfer.

    Ein workaround könnte sein, wickeln Sie Ihre Eingabe in einem Formular, verwenden Sie die action view-Helfer über das submit-Ereignis, wie die folgenden:

    Vorlage

    {{#each}}
          <li>                   
              <form {{action "createUser" this on="submit"}}>
                  {{name}}
                  {{input type="text" value=name}}          
              </form>
          </li>
      {{/each}}

    Route

      ...
      actions: {
        createUser: function(user) {
          alert(user.get('name'));
        }
      }
      ...

    So, wenn der Benutzer enter drückt, wird das Ereignis ausgelöst.

    Den wichtigsten Unterschied zwischen den action-Eigenschaft und der action view Helfer ist, dass der action view Helfer ist flexibler und können Sie liefern den Kontext und setzen es im inneren eines jeden-tag:

    <div {{action "someAction" someObject}} on="click">Click me</div>

    In der route:

    actions: {
      someAction: function(someObject) {
        //do something with the someObject
      }
    }

    Sehen die docs für weitere Informationen

    Bitte geben Sie einen Blick in die jsfiddle zu sehen, dass die Probe in Aktion http://jsfiddle.net/marciojunior/UAgjX/

    Ich hoffe, es hilft

    • bewegen Klammern <div {{action „someAction“ someObject}} auf=“auf“>Klick mich</div>
    • Gibt es eine Lösung für <input type=“file“ /> zu übergeben, onchange-Ereignis in action helper und mit dem Zugriff auf „Dateien“ – Eigenschaft?
  2. 2

    Schließlich landete ich mit dieser Lösung:

    Vorlage

    {{input class="newUser" type="text" value=newFullName placeholder="add user"}}
    <button {{action 'createUser' this newFullName}}>Send</button>

    Controller

    createUser: function (fund, newFullName) {
            var fullName = newFullName;                        
            var user = this.store.createRecord('appUser', {
                fullName: fullName,                
                fund: fund,
                payments:[]
            });
            user.save().then(function(){                
                fund.get('users').pushObject(user);                
                fund.save().then(function(){
                    fund.reload();
                });
            });
        }
    • warum benutzen Sie diese? Warum nicht einfach eine get(„newFullName“) in der action-handler?
  3. -3

    Können Sie übergeben Sie einen parameter an eine action-helper :{{action "doSomething" xxx }}

    Wo doSomething ist Ihr controller-Methode ,und xxx ist alles in den aktuellen Kontext der Vorlage.

Kostenlose Online-Tests

Ihre Entwicklerrolle