Любой, кто играл в Nockoutjs, знает, что есть мощная функция, называемая компонентом, и одна из удивительных вещей в этом компоненте - это то, что у него есть своя собственная просмотра и шаблон, например, следующее:
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> <meta charset = "utf-8"/> <script src = "jquery-1.2. src = "nockoutjs.js"> </script> </head> <body> <div data-bind = 'component: "editor". '');}, шаблон: 'Сообщение: <входные данные bind = "value: text"/>'+ '(длина: <span data-bind = "text: text (). length"> </span>)'}); ko.applybindings (); </script> </body> </html>;
Пожалуйста, посмотрите на этот код. Текущий компонент внедрит шаблон шаблона в тег DIV HTML, а также есть привязанность текстового элемента в этом теге шаблона, и источник данных этого (text (). ． Верно. Полем Полем С интеграцией этих двух, наш последний HTML показан следующим образом:
Затем мы случайно вводим несколько чисел и отодвигаем мышь. В настоящее время будет запускается событие изменения ввода, например, следующее.
Разве это не так круто? ? ? Конечно, некоторые люди могут спросить, что, если я дам небольшое значение по умолчанию, когда ввод отображается? ? ? Это нормально? Конечно, это также возможно. В настоящее время мы можем назначить значение по умолчанию в связке данных, и это нормально. Полем Полем Например, следующее:
<body> <h4> Второй экземпляр, прохождение параметров </h4> <div Data-bind = 'component: {name: "editor message-editor", params: {initialText: "Привет, мир!" }} '> </div> <script type = "text/javascript"> ko.components.register (' editor 'message ’, {viewmodel: function (params) {this.text = ko.observable (params && params.initialText || data-bind = "text: text (). length"> </span>) '}); ko.applybindings (); </script> </body>Вы можете видеть, что в приведенном выше коде я добавил свойство начального текста в объект Params в компоненте, и в настоящее время я могу динамически вводить этот начальный текст в нашу ViewModel, а затем наши элементы ввода и SPAN подписываются на это свойство мониторинга текста в этом ViewModel через Data Bind. В настоящее время происходит операция обновления в реальном времени. Я не могу дождаться, чтобы посмотреть ~
1: Анализ проблем
Хорошо, благодаря вышеупомянутой демонстрации, вы, возможно, нашли следующие две проблемы. Первая проблема в том, что это настолько мощное. Пока вы регистрируете, вам не нужно применять ViewModel через ApplyBindings, которая осознает модуляризацию страницы, что действительно удобно - так что эта проблема - хорошая вещь. Вторая проблема заключается в том, что содержание в нашем шаблоне шаблона находится в форме «твердого кодирования», то есть, если есть много этого контента, например, 100 строк и 200 строк, мы безумны? ? ? Независимо от того, насколько вы способны, вы не можете развязать их один за другим. Даже если вы их разбиваете, стоимость технического обслуживания слишком высока. Итак, вопрос в том, как динамически повернуть контент шаблона? ? ? Например, страница библиотеки Baidu, которую мы видим в реальности. Полем Полем Как показано на рисунке ниже:
На этой странице много модулей, таких как три выше, я обведу. В этих трех модулях должно быть много HTML ~~~
Два: динамическое приобретение шаблона
Обычно существует два способа динамического получения контента HTML. Первый - это требуется. Конечно, вам нужно ссылаться на такой JS. Второе - переписать их шаблоны. Конечно, в этой статье, что нам нужно сделать, это переписать функцию LoadTemplate в компоненте, а затем заменить загрузчик по умолчанию. Разве это не очень просто? ? ?
1. Перепишите метод LoadTemplate
// Шаг 1: Перепишите метод LoadTemplate WAR TemplateFromUrlloader = {LoadTemplate: function (имя, templateConfig, callback) {if (templateConfig.fromurl) {var fullurl = '/' + templateConfig.fromurl // ajax dynamally Получите внешнее содержимое файла $. {ko.components.defaultloader.loadtemplate (name, markupString, callback);});} else {callback (null);}}}; // заменить исходный загрузчик по умолчанию и реализовать новый TemplateFramurlOaderko.components.loaders.unshift (TemplateFromUrlAder);2. Поместите жесткий код во внешний файл, например, я создал новый файл file.html.
3. Зарегистрируйте компонент, а затем обратитесь к пути внешнего файла на теге шаблона, например, следующее {OffUrl: 'file.html'}
ko.components.register ('message-editor', {viewmodel: function (params) {this.text = ko.observable (params && params.initialtext || '');}, шаблон: {actorurl: 'file.html'},});Хорошо, все функции готовы. Давайте просматрим страницу, чтобы увидеть, как она выглядит? ? ?
Наконец, великая работа была сделана. Это верно? Тогда может ли он быть распространен на пример «библиотеки Baidu», представленной выше. Мы можем поместить HTML каждого модуля в отдельный файл.
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "jquery-1.2. src = "nockoutjs.js"> </script> </head> <body> <div data-bind = 'component: {name: "message-editor", params: {initialText: "Привет !!!" }} '> </div> <script type = "text/javascript"> // Шаг 1: Перепишите метод загрузки Получить внешний содержимое файла $ .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.InitialText | stemplate: },}); ko.applybindings (); </script> </body> </html>Выше приведено метод динамической загрузки внешних файлов в nockoutjs в качестве метода реализации источника данных шаблона в компоненте. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!