Knock-out texte de liaison ne fonctionne pas pour l'entrée

Comme un débutant total avec le Javascript, j'ai décidé d'essayer de knock-out à partir de très simple et d'aller plus avancé. J'ai cependant ne pouvais même pas à le faire fonctionner dans un scénario très simple.

Je suppose que le problème est quelque chose de très simple et je suis un peu gênée de poser cette question ici. Mais je ne suis pas bon à débogage Javascript et ne savent pas comment les bugs pourrait se manifester donc, ici, va.

C'est le code source html de la page après avoir été généré par 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 ou 13 n'obtient pas lié à l'entrée ou de la zone de texte.

Essayé de mettre dans un ko.observables (), mais aussi aid fonctionne pas. C'est juste comme le script n'est pas en cours d'exécution.

Essayé de débogage à l'aide de FireBug et je peux voir la applyBinding est exécutée et le viewModel objet n'inclure les variables.

C'est probablement quelque chose d'évident qui se passe ici. Si vous ne pouvez pas le voir ici, alors pourriez-vous préciser ce que je devrais rechercher lors de l'utilisation de FireBug?


MODIFIER

Après avoir essayé plusieurs combinaisons des solutions, je suis toujours avoir des problèmes. Avec une solution le code HTML ressemble à ceci:

<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>

Ne semble pas à la matière qui applyBindings solution que j'ai utiliser, ils fonctionnent tous de la même.

De sorte que la liaison fonctionne enfin, mais seulement sur IE et Firefox mais pas sur Chrome. Également observables ne fonctionne pas du tout. Je ne peux pas mettre à jour les champs par l'écriture dans le champ de saisie.

OriginalL'auteur Ingó Vals | 2011-11-07