يعرف أي شخص لعب Knockoutjs أن هناك وظيفة قوية تسمى المكون ، وأحد الأشياء الرائعة في هذا المكون هو أن لديها نموذج ViewModel الخاص به ، مثل ما يلي:
ko.components.register ('message-editor' ، {viewModel: function () {} ، template: ""}) ؛من الواضح أن ViewModel هو منطقة الوظيفة ، والقالب هو منطقة القالب ، ثم يتم تسجيل المكون في خروج المغلوب من خلال وظيفة التسجيل. دعنا نوضح وظيفة بسيطة أدناه ، والتي تتمثل في عرض طول طول محتوى "الإدخال" الحالي.
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> </title> </title> </crimt> </crimt> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'component: "message-Editor"'> </viv> <script type = "text/javaScript"> ko.components.register ('message-editor' ، "') ؛} ، القالب:" الرسالة: <إدخال بيانات bind = "value: text"/>'+ '(length: <span data-bind = "text: text ().يرجى إلقاء نظرة فاحصة على هذا الرمز. سيقوم المكون الحالي بحقن قالب القالب في علامة DIV الخاصة بـ HTML ، وهناك أيضًا ربط عنصر النص في علامة القالب هذه ، ويحدث مصدر بيانات هذا (Text (). الطول) this.text في ViewModel. ． يمين. . . مع دمج هذين ، يتم عرض HTML النهائي لدينا على النحو التالي:
بعد ذلك ، ندخل بعض الأرقام بشكل عرضي وننقل الماوس بعيدًا. في هذا الوقت ، سيتم تشغيل حدث تغيير المدخلات ، مثل ما يلي.
أليس هذا رائع؟ ؟ ؟ بالطبع ، قد يسأل بعض الأشخاص ، ماذا لو أعطيت قيمة افتراضية صغيرة عند تقديم الإدخال؟ ؟ ؟ هل هذا جيد؟ بالطبع ، من الممكن أيضًا. في هذا الوقت ، يمكننا تعيين القيمة افتراضيًا في ملف البيانات وهو على ما يرام. . . على سبيل المثال ، ما يلي هو:
<Body> <h4> المثيل الثاني ، تمرير المعلمات </h4> <div data-bind = 'component: {name: "message-Editor" ، params: {initialText: "Hello ، World!" }} '> </div> <script type = "text/javaScript"> ko.components.register (' message-editor '، {viewModel: function (params) {this.text = ko.observable (text: data-bind = "text: text (). length"> </span>) '}) ؛ ko.applybindings () ؛ </script> </body>يمكنك أن ترى أنه في الكود أعلاه ، أضفت خاصية initialText إلى كائن Params في المكون ، وفي هذا الوقت ، يمكنني حقن هذا النصي الأولي بشكل ديناميكي في ViewModel الخاص بنا ، ثم تشترك عناصر الإدخال والانتشار الخاصة بنا في خاصية مراقبة النص هذه في ViewModel هذه من خلال ربط البيانات. في هذا الوقت ، تحدث عملية تحديث في الوقت الفعلي. لا استطيع الانتظار لألقي نظرة ~
1: تحليل المشكلة
حسنًا ، من خلال العرض التوضيحي أعلاه ، قد تكون قد وجدت المشكلتين التاليتين. المشكلة الأولى هي أنها قوية للغاية. طالما قمت بالتسجيل ، فلن تحتاج إلى تطبيق عرض ViewModel من خلال ApplicBindings ، والذي سيدرك تعليمي للصفحة ، وهو أمر مناسب حقًا ~ لذلك هذه المشكلة شيء جيد. المشكلة الثانية هي أن المحتوى الموجود في قالب القالب الخاص بنا في شكل "مرمز صلب" ، أي إذا كان هناك الكثير من هذا المحتوى ، مثل 100 سطر و 200 سطر ، هل نحن مجنونون؟ ؟ ؟ بغض النظر عن مدى قدرتك ، لا يمكنك لصقهم واحدًا تلو الآخر. حتى لو قمت بصقهم ، فإن تكلفة الصيانة مرتفعة للغاية. لذا فإن السؤال هو ، كيف يتم تحويل محتوى القالب ديناميكيًا؟ ؟ ؟ على سبيل المثال ، صفحة مكتبة بايدو التي نراها في الواقع. . . كما هو مبين في الشكل أدناه:
هناك العديد من الوحدات النمطية في هذه الصفحة ، مثل الثلاثة المذكورة أعلاه. يجب أن يكون هناك الكثير من HTML في هذه الوحدات الثلاث ~~~
الثاني: القالب الاستحواذ الديناميكي
عادة ما يكون هناك طريقتان للحصول على محتوى HTML ديناميكيًا. الأول هو requirejs. بالطبع ، تحتاج إلى الرجوع إلى مثل هذا JS. والثاني هو إعادة كتابة قوالبهم. بالطبع ، في هذه المقالة ، ما يتعين علينا القيام به هو إعادة كتابة وظيفة loadtemplate في المكون ثم استبدال محمل التحميل الافتراضي. أليس هذا بسيط جدا؟ ؟ ؟
1. أعد كتابة طريقة loadtemplate
// الخطوة 1: إعادة كتابة طريقة loadtemplate var var من fromurlloader = {loadtemplate: function (name ، templateconfig ، callback) {if (templateconfig.fromurl) {var fullurl = '/' + templateConfig.fromurl // a jax get dynamial the the extense $. {ko.components.defaultloader.loadtemplate (الاسم ، markupstring ، رد الاتصال) ؛}) ؛} آخر {callback (null) ؛}}} ؛2. ضع رمزًا صلبًا في ملف خارجي ، على سبيل المثال ، قمت بإنشاء ملف file.html جديد.
3. قم بتسجيل المكون ثم الرجوع إلى مسار الملف الخارجي على علامة القالب ، مثل ما يلي {fromurl: 'file.html'}
ko.components.register ('message-editor' ، {viewModel: function (params) {this.text = ko.observable (params && params.initialtext || '') ؛} ، template: {fromurl: 'file.html'} ،}) ؛حسنًا ، جميع الوظائف جاهزة. دعنا نتصفح الصفحة لنرى كيف تبدو؟ ؟ ؟
وأخيرا ، تم العمل العظيم. هل هذا صحيح؟ ثم يمكن تمديدها إلى مثال "مكتبة Baidu" التي تم تقديمها أعلاه. يمكننا وضع HTML لكل وحدة في ملف منفصل.
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> </title> </title> </crimt> </crimt> src = "changoutjs.js"> </script> </head> <body> <div data-bind = 'component: {name: "message-editor" ، params: {initialText: "Hello !!!" }} '> </div> <script type = "text/javaScript"> // الخطوة 1: إعادة كتابة طريقة loadtemplate var var fromurlloader = {loadtemplate: function (name ، templateconfig ، callback) {if (templateconfig.fromurl) {var fullurl = احصل على محتوى الملف الخارجي ديناميكيًا $ .get (fullurl ، function (markupString) {ko.components.defaultloader.loadtemplate (name ، markupstring ، callback) ؛}) ؛} else {callback (null) ؛}} ؛ templatefromurlloaderko.components.loaders.unshift (templatefromurlloader) ؛ ko.components.register ('message-editor' ، {viewmodel: function (params) {this.text = ko.observable (params && params.iniTialtex } ،}) ؛ ko.applybindings () ؛ </script> </body> </html>ما سبق هو طريقة تحميل الملفات الخارجية ديناميكيًا في KnockoutJs كطريقة تنفيذ لمصدر بيانات القالب في المكون. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!