2013-12-03 3 views
0

У меня возникли проблемы с загрузкой моих сценариев для страницы, которую я использую, с формой knockout.js. Как только страница загружается, мой js-файл, содержащий viewmodel, не сразу загружается, поэтому появляются ошибки, которые заставляют страницу затухать все мои сообщения проверки и отображать divs, которые должны быть скрыты, но затем загружаются, а форма затем появляется нормально.Проблемы с порядком загрузки Knockout.JS

На main.ctp (CakePHP просмотр файла) Я загрузить файл с именем loadScripts.JS, который содержит следующие

//loadscripts.JS 
jQuery(document).ready(function ($) { 
    load_scripts(); 
}); 

function load_scripts(){ 
    $.getScript("localhost/js/knockout-2.3.0.js", function() { 
     $.getScript("http://localhost/js/Knockout-Validation/Src/knockout.validation.js", function() { 
       retrieve_window(); 
     }); 
    }); 
} 

Итак, этот момент нокаутом и нокаут-проверки загружаются. Затем она вызывает функцию, которая находится на main.ctp, чтобы получить окно, которое содержит форму нокаута

//main.ctp 
<script src="/localhost/js/loadscripts.js"></script> <!-- this is the JS file I showed above 

function retrieve_window(){ 
    $.post("/demo/demo_window/1",function(data) { 
     $('#window_wrapper').html(data); 
    }); 
} 

наПредставления demo_window (CakePHP), то ViewModel сразу называете в голове

//demo_window.ctp 
<head> 
    <script src="localhost/js/demo_form.js"></script> 
</head> 

Таким образом, порядок, которые загружаются скрипты является (подтвержденное вкладке сети в Chrome)

  1. Knockout
  2. Нокаут-Validation
  3. demo_form.ctp (Нокаут питание форма)
  4. demo_form.js (вид-модель для формы)

Я даже попытался погрузочный demo_form.js в кластере $ getScripts выше, но, несмотря на нагрузки до demo_form. ctp форма даже не показалась «видимой» js вообще. Все ошибки проверки и скрытые divs отображались. Таким образом, последовательность нагрузки затем (подтверждена вкладка сети в Chrome)

  1. Knockout
  2. Нокаут-Validation
  3. demo_form.js (вид-модель для формы)
  4. demo_form.ctp (Нокаут питания формы)

Странная вещь, это не дало мне никаких ошибок. Он просто отображается так, как если бы были ошибки (отображаются сообщения проверки, отображаемые скрытые divs).

ответ

1

Возможно, вам лучше всего воспользоваться надлежащей системой загрузки модулей (require.js - это тот, с которым я больше всего знаком, и, возможно, тот, с которым вы сможете больше всего помочь, но это не единственный). Такие системы, помимо прочего, должны быть уверены, что никакая часть кода не будет работать до тех пор, пока все ее зависимости не будут загружены и запущены. Они берут некоторое предварительное обучение, но выигрыш большой.

последнего средства решение проблемы предотвращения «Вспышка/Unbehaviored без стилей Content» (FOUC или FUBC) являются установка display: none на элементах нарушителей с помощью встроенного style атрибутов, а затем отобразить их в вашем коде. Однако вы не должны использовать это, чтобы похлопывать повязку по более фундаментальным проблемам.

Смежные вопросы