vue remote template

vue-remote-template

Ein Vue.js-Mixin zum Abrufen einer Vorlage über Ajax

Zusammenfassung

 < html >
  < body >
    < div id =" app " > </ div >
    < script src =" /app.js " > </ script >
  </ body >
</ html > 

 // app.js
import Vue from "vue/dist/vue.esm"
import VueRemoteTemplate from "vue-remote-template"

document . addEventListener ( "DOMContentLoaded" , ( ) => {
  new Vue ( {
    mixins : [ VueRemoteTemplate ] ,
    el : "#app" ,
    data : {
      templatePath : "/hello"
    }
  } )
} )

Der obige Code ruft über Ajax ein HTML-Fragment von /hello ab. Wir nennen diese Remote-Vorlage . Remote-Vorlagen werden in Vue-Vorlagen kompiliert und zum Aufbau eines DOM-Baums auf dem Ziel- <div> -Element verwendet.

Formulareingabebindungen

Wenn eine Remote-Vorlage abgerufen wird, wird dynamisch eine Vue-Komponente erstellt.

Und wenn die Remote-Vorlagen v-model Anweisungen enthalten, werden die Daten der Komponente mit der Funktion getInitialData des Pakets vue-data-scooper initialisiert.

 < form >
  < input type =" text " name =" user[name] " v-model =" user.name " value =" Alice " >
</ form >

Die obige Remote-Vorlage setzt die Eigenschaft user.name der Komponente auf die Zeichenfolge „Alice“.

Ausgangsdaten

Das Antwortdatum vom Backend-Server kann eine Zeichenfolge oder JSON-Daten sein.

Im ersteren Fall wird die Zeichenfolge als Remote-Vorlage interpretiert.

Im letzteren Fall sollten die JSON-Daten template und einen optionalen data haben. Der Wert des template wird als Remote-Vorlage interpretiert. Der Wert des data wird als Anfangsdaten der Vue-Komponente verwendet.

Wenn der Server beispielsweise die folgenden JSON-Daten zurückgibt:

{
  "template" : " <div>{{ message }}</div> " ,
  "data" : { "message" : " Hello, world! " }
}

Das resultierende HTML-Fragment lautet dann <div>Hello, world!</div> .

Beachten Sie, dass die von den JSON-Daten vom Server bereitgestellten Anfangsdaten den durch die v-model -Anweisungen festgelegten Datensatz überschreiben.

Erweiterungen

Wenn Sie die Eigenschaften der Komponente initialisieren möchten, die nicht über v-model -Direktive an eine Eingabe gebunden sind, müssen Sie eine Erweiterung bereitstellen.

 // greeting.js
export const greeting = {
  data : function ( ) {
    return {
      name : "Alice"
    }
  }
}

Eine Erweiterung ist ein Mixin, das beim Erstellen der Komponente verwendet wird.

Sie können Erweiterungen für die extensions registrieren.

 // app.js
import Vue from "vue/dist/vue.esm"
import VueRemoteTemplate from "vue-remote-template"
import { greeting } from "./greeting"

document . addEventListener ( "DOMContentLoaded" , ( ) => {
  new Vue ( {
    mixins : [ VueRemoteTemplate ] ,
    el : "#app" ,
    data : {
      templatePath : "/hello" ,
      extensions : {
        greeting : greeting
      }
    }
  } )
} )

Der Name der Erweiterung muss durch das data-extension Attribut des Stammelements der Remote-Vorlage angegeben werden:

 < div data-extension =" greeting " >
  < div > Hello, {{name}}! </ div >
</ div >

Die obige Vorlage erzeugt das folgende HTML-Fragment:

 < div data-extension =" greeting " >
  < div > Hello, Alice! </ div >
</ div > 

visit

Sie können die visit -Methode aufrufen, um die Remote-Vorlage zu wechseln.

 < div >
  < button type =" button " @click =" visit('/goodbye') " > Click me! </ button >
</ div >

Wenn der Benutzer im Browser auf diese Schaltfläche klickt, wird ein Ajax-Zugriff auf /goodbye ausgeführt und eine Remote-Vorlage abgerufen.

Wenn das Stammelement einer neu abgerufenen Vorlage das Attribut data-title hat, wird sein Wert auf den Dokumenttitel gesetzt.

Und wenn das Stammelement einer neu abgerufenen Vorlage über das Attribut data-url verfügt, wird dessen Wert verwendet, um mit der Methode window.history.pushState() einen Eintrag zum Browserverlauf hinzuzufügen.

Hier ist ein Beispiel einer Remote-Vorlage:

 < div data-extension =" greeting " data-title =" Farewell " data-url =" /bye " >
  < div > Goodbye, {{name}}! </ div >
</ div >

Wenn Sie die Methode visit für ein a Element verwenden, können Sie das Argument für die Methode weglassen. Der href Wert des a Elements wird als Remote-Vorlagenpfad interpretiert.

 < div >
  < a href =" /goodbye " @click.prevent =" visit " > Click me! </ a >
</ div >

Beachten Sie, dass Sie die Standardaktion verhindern müssen, damit der Browser den angegebenen Pfad nicht tatsächlich besucht.

submit -Methode

Sie können die submit -Methode aufrufen, um Formulardaten per Ajax-Aufruf zu übermitteln.

 < form action =" /users/123 " method =" post " @submit.prevent =" submit " >
  < input type =" hidden " name =" _method " value =" patch " >
  < input type =" text " name =" user[name] " v-model =" user.name " value =" Alice " >
  < input type =" submit " value =" Update " >
</ form >

Wenn der Benutzer auf die Schaltfläche „Aktualisieren“ klickt, wird eine Ajax-Anfrage über die PATCH -Methode an /users/123 gesendet.

Wenn der Server einen Text zurückgibt, wird dieser als Remote-Vorlage verwendet, um das Ergebnis anzuzeigen. Wenn der Server ein JSON-Objekt zurückgibt, muss es den templatePath -Schlüssel enthalten, dessen Wert verwendet wird, um eine weitere Ajax-Anfrage zu stellen, um eine Remote-Vorlage abzurufen.

Beachten Sie, dass die submit -Methode für das <form> -Element aufgerufen werden muss. Sie können es nicht für die Elemente innerhalb eines Formulars aufrufen.

Beachten Sie außerdem, dass die Methode des Ajax-Aufrufs durch den Wert eines versteckten Elements mit dem Namen _method bestimmt wird.

Demo

Siehe https://github.com/kuroda/vue-rails-form-builder-demo.

Entwicklungs-Setup

 # install dependencies
yarn install

# test
yarn test

Zum Testen benötigen Sie Google Chrome Version 59 oder höher. Wenn Sie google-chrome-beta verwenden, exportieren Sie die Umgebungsvariable CHROME_BIN :

 export CHROME_BIN= $( which google-chrome-beta ) 

Gebäude für den Vertrieb

yarn build