Простой knockout.js не работает

Question

Я пытаюсь простейший возможный пример knockout.js, но он не работает (имя и фамилия остаются пустыми). Я поместил теги своего сценария после тегов html, которые используют привязку, и вызовет ko.applyBindings после загрузки страницы. Предупреждение работает, поэтому функция срабатывает. Любая помощь?

<p>First name: <strong data-bind="text: firstName"></strong></p> 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 

<script type="text/javascript' src='js/knockout-3.4.0.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript"> 
function AppViewModel() { 
    alert("b"); 
    this.firstName = "Bert"; 
    this.lastName = "Bertington"; 
} 

$(window).load(function() { 
    ko.applyBindings(new AppViewModel()); 
}); 
</script> 

EDIT Эта проблема решается, но у меня есть еще один. Что делать, если я хотел бы добавить имя и фамилию одновременно после нажатия кнопки (а не когда входы теряют фокус)?

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 

<a class="btn btn-primary btn-lg" role="button" >Add</a> 

<p>First name: <strong data-bind="text: firstName"></strong></p> 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 


<script type="text/javascript" src="js/knockout-3.4.0.js"></script> 
<script type="text/javascript"> 

function AppViewModel() { 
    this.firstName = ko.observable(); 
    this.lastName = ko.observable(); 
} 

ko.applyBindings(new AppViewModel()); 

</script> 

Answer 1

У вас есть несоответствующие кавычки в теге скрипта. Оно должно быть:

<script type="text/javascript" src="js/knockout-3.4.0.js"></script> 

Вы можете на самом деле падение атрибут type полностью и просто сделать:

<script src="js/knockout-3.4.0.js"></script> 

, и он будет по-прежнему работать нормально.

Answer 2

Несколько вещей:

• Я рекомендую загрузки JQuery первый;
• Использовать $(document).ready (или его эквивалент: $(function() ...) вместо $(window).load;
• Исправить котировки в тэге script;
• Убедитесь, что загружен нокаут (вы не используете ссылку CDN, где у вас есть один для jQuery);

Вот доказательство того, что после этих изменений он может работать:

function AppViewModel() { 
 
    alert("b"); 
 
    this.firstName = "Bert"; 
 
    this.lastName = "Bertington"; 
 
} 
 

 
$(function() { 
 
    ko.applyBindings(new AppViewModel()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<p>First name: <strong data-bind="text: firstName"></strong></p> 
 
<p>Last name: <strong data-bind="text: lastName"></strong></p>