#javascript #firebug #knockout.js
#javascript #firebug #knockout.js
Вопрос:
Будучи полным новичком в Javascripts, я решил попробовать Knockout, начиная с очень простого и продвигаясь дальше. Однако мне даже не удалось заставить его работать в очень простом сценарии.
Я предполагаю, что проблема в чем-то очень простом, и мне немного неловко спрашивать об этом здесь. Но я не силен в отладке Javascript и не знаю, как могут проявляться ошибки, поэтому здесь.
Это HTML-источник страницы после того, как она была сгенерирована asp.net MVC 3 :
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Index</h2>
<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
<script type="text/javascript">
var viewModel = {
name: "Joe",
number: "13"
};
</script>
<script type="text/javascript">
ko.applyBindings(viewModel);
</script>
<ul>
<li>Name: <input data-bind="text: name"/></li>
<li>Number: <input data-bind="text: number"/></li>
</ul>
<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>
</body>
</html>
Joe или 13 не привязывается к входному или текстовому полю.
Попытался поместить это в ko.observable(), но также не работает. Это похоже на то, что скрипт не запущен.
Пробовал отладку с помощью FireBug, и я вижу, что привязка приложения выполнена, и объект ViewModel содержит правильные переменные.
Вероятно, здесь происходит что-то очевидное. Если вы не видите этого здесь, не могли бы вы указать, на что мне следует обратить внимание при использовании FireBug?
Редактировать
Попробовав несколько комбинаций приведенных решений, у меня все еще возникают проблемы. С одним решением HTML выглядит следующим образом:
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var viewModel = {
name: ko.observable("Joe"),
number: ko.observable("13")
};
</script>
<script type="text/javascript">
$(function () { ko.applyBindings(viewModel); })
</script>
</head>
<body>
<h2>Index</h2>
<ul>
<li>Name: <input data-bind="text: name"></input></li>
<li>Number: <input data-bind="text: number"></input></li>
</ul>
<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>
</body>
</html>
Кажется, не имеет значения, какое решение applyBindings я использую, все они работают одинаково.
Итак, привязка, наконец, работает, но только в IE и Firefox, но не в Chrome. Также наблюдаемое вообще не работает. Я не могу обновить поля, записав в поле ввода.
Ответ №1:
Входной тег должен быть привязан к name в качестве значения вместо текста
например
Name:<input data-bind="value: name"></input>
Ответ №2:
applyBindings должен быть выполнен после полной загрузки HTML-кода. Обычно я вызываю его из метода jquery.ready, но я предполагаю, что он также будет работать, если вы поместите блок сценария, содержащий applyBindings, после html-тегов, которые нуждаются в привязке.
Комментарии:
1. Ок знал, что это было что-то простое. Итак, принято ли использовать этот метод jquery.ready? Думаю, я мог бы погуглить, чтобы узнать об этом.
2. $(документ). готово (ko.applyBindings (ViewModel)) тогда должно сработать? Это не работает.
3. $(function(){ko.applyBindings(ViewModel);}), вероятно, будет работать лучше
Ответ №3:
Попробуйте:
<script type="text/javascript">
$(function () {
var viewModel = {
name: "Joe",
number: "13"
};
ko.applyBindings(viewModel);
});
</script>
.. и сделайте имя и номер наблюдаемыми, если вы хотите двустороннюю привязку (т. Е. Модель обновляется, когда пользователь вводит данные в поле ввода)
Комментарии:
1. С помощью этого решения ko.observable, а также решения, предоставленного Бертом (установка привязки приложения под закрывающим тегом html), он частично работает в Firefox и IE, но не в Chrome. В IE переменные отображаются как в поле ввода, так и в диапазоне, но не обновляются при обновлении ввода. В Firefox он не отображается в поле ввода, но применяется к тегу при просмотре исходного кода. В Chrome это вообще не работает.
2. Вы дважды ссылаетесь на файл javascript нокаута. Ссылайтесь на него только один раз и переместите ссылку в тег head.
Ответ №4:
Сценарий должен быть написан под элементом управления привязкой:
<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>