الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

vue-remote-template

مزيج Vue.js لجلب القالب عبر Ajax

ملخص 

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

يقوم الكود أعلاه بجلب جزء HTML من /hello عبر Ajax. نحن نسمي هذا القالب البعيد . يتم تجميع القوالب البعيدة في قوالب Vue، ويتم استخدامها لإنشاء شجرة DOM على عنصر <div> الهدف.

روابط إدخال النموذج

عند جلب قالب بعيد، يتم إنشاء مكون Vue ديناميكيًا.

وإذا كانت القوالب البعيدة تحتوي على توجيهات v-model ، فستتم تهيئة بيانات المكون باستخدام وظيفة getInitialData لحزمة vue-data-scooper. 

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

يقوم القالب البعيد أعلاه بتعيين خاصية user.name الخاصة بالمكون إلى السلسلة "Alice".

البيانات الأولية

يمكن أن يكون تاريخ الاستجابة من الخادم الخلفي عبارة عن سلسلة أو بيانات JSON.

في الحالة الأولى، سيتم تفسير السلسلة على أنها القالب البعيد.

في الحالة الأخيرة، يجب أن تحتوي بيانات JSON على مفتاح template ومفتاح data الاختياري. سيتم تفسير قيمة مفتاح template على أنها القالب البعيد. سيتم استخدام قيمة مفتاح data كبيانات أولية لمكون Vue.

على سبيل المثال، عندما يقوم الخادم بإرجاع بيانات JSON التالية: 

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

بعد ذلك، سيكون جزء HTML الناتج هو <div>Hello, world!</div> .

لاحظ أن البيانات الأولية التي توفرها بيانات JSON من الخادم تحل محل البيانات التي تم تعيينها بواسطة توجيهات v-model .

ملحقات

إذا كنت تريد تهيئة خصائص المكون غير المرتبطة بإدخال عبر توجيه v-model ، فيجب عليك توفير الامتداد . 

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

الامتداد عبارة عن مزيج يتم استخدامه عند إنشاء المكون.

يمكنك تسجيل ملحقات لخاصية extensions . 

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

يجب تحديد اسم الامتداد بواسطة سمة data-extension للعنصر الجذر للقالب البعيد: 

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

يُنتج القالب أعلاه جزء HTML التالي: 

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

طريقة visit

يمكنك استدعاء طريقة visit لتبديل القالب البعيد. 

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

عندما ينقر المستخدم على هذا الزر في المتصفح، يتم تنفيذ وصول Ajax إلى /goodbye ويتم جلب قالب بعيد.

إذا كان العنصر الجذر لقالب تم جلبه حديثًا يحتوي على سمة data-title ، فسيتم تعيين قيمته على عنوان المستند.

ويحتوي العنصر الجذر للقالب الذي تم جلبه حديثًا على سمة data-url ، ويتم استخدام قيمته لإضافة إدخال إلى سجل المتصفح باستخدام طريقة window.history.pushState().

فيما يلي مثال على القالب البعيد: 

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

إذا كنت تستخدم طريقة visit على عنصر a ، فيمكنك حذف وسيطة الطريقة. يتم تفسير قيمة href a على أنها مسار القالب البعيد. 

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

لاحظ أنه يجب عليك منع الإجراء الافتراضي حتى لا يقوم المتصفح بزيارة المسار المحدد فعليًا.

طريقة submit

يمكنك استدعاء طريقة submit لإرسال بيانات النموذج عبر مكالمة Ajax. 

 < 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 >

عندما ينقر المستخدم على زر "تحديث"، يتم إرسال طلب Ajax عبر طريقة PATCH إلى /users/123 .

إذا قام الخادم بإرجاع نص، فسيتم استخدامه كقالب بعيد لإظهار النتيجة. إذا قام الخادم بإرجاع كائن JSON، فيجب أن يحتوي على مفتاح templatePath ، الذي تُستخدم قيمته لتقديم طلب Ajax آخر لجلب قالب بعيد.

لاحظ أنه يجب استدعاء طريقة submit على العنصر <form> . لا يمكنك تسميته على العناصر الموجودة في النموذج.

لاحظ أيضًا أن طريقة استدعاء Ajax يتم تحديدها بقيمة العنصر المخفي اسمه _method .

تجريبي

راجع https://github.com/kuroda/vue-rails-form-builder-demo.

إعداد التطوير 

 # install dependencies
yarn install

# test
yarn test

أنت بحاجة إلى الإصدار 59 من Google Chrome أو أعلى لإجراء الاختبار. إذا كنت تستخدم google-chrome-beta ، فقم بتصدير متغير البيئة CHROME_BIN : 

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

بناء للتوزيع 

yarn build
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل