ASP.NET MVC4 et Knockout js

Question

J'essaie d'utiliser knockout js dans mon projet alors j'ai essayé le simple exemple Hello World mais je ne pouvais pas le faire fonctionner. J'ai créé un nouveau projet MVC4 et il suffit de copier faire un simple ci-dessous liaison est mon code

<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    // Here's my data model 
    var viewModel = function (first, last) { 
     this.firstName = ko.observable(first); 
     this.lastName = ko.observable(last); 

     //this.fullName = ko.computed(function() { 
      // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
      //return this.firstName() + " " + this.lastName(); 
     //}, this); 
    }; 

    $(document).ready(function() { 
     ko.applyBindings(new viewModel("Planet", "Earth")); // This makes Knockout get to work 
    });​ 
</script> 

<div class="liveExample"> 
    <p>First name: <input data-bind="value: firstName" /></p> 
    <p>Last name: <input data-bind="value: lastName" /></p> 
    @*<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>*@ 
</div> 

Fondamentalement, il affichera simplement la valeur du modèle sur une zone de texte. je l'ai déjà fait référence à la knockout.js dans mon projet, mais il ne fonctionne pas J'ai aussi ajouté les js knock-out dans mes BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-2.1.0.js")); 

Je ne marchait pas

Answer 1

Si vous utilisez MVC, utilisez la section scripts pour déclarer vos JS. Cela va déplacer les déclarations au bas de la page HTML, laissant le rendu HTML en premier. Voici ma version de votre code qui a fonctionné la première fois hors de la boîte:

@{ 
    ViewBag.Title = "Index"; 
} 


<h2>Index</h2> 

<div class="liveExample"> 
    <p>First name: 
     <input data-bind="value: firstName" /></p> 
    <p>Last name: 
     <input data-bind="value: lastName" /></p> 
    @*<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>*@ 
</div> 

@section scripts { 
    <script src="~/Scripts/knockout-2.2.1.js"></script> 
    <script type="text/javascript"> 
    var viewModel = function (firstName, lastName) { 
     this.firstName = ko.observable(firstName); 
     this.lastName = ko.observable(lastName); 
    }; 

    $(function() { 
     ko.applyBindings(new viewModel("Planet", "Earth")); 
    }); 
    </script> 
} 

Answer 2

essayer de mettre KO dans le document de . Sans aucun message d'erreur, la seule chose que je peux dire est que j'ai rencontré un problème similaire et que c'était la solution pour moi. Mon exemple me rendait dingue parce que ça fonctionnait en violon mais pas en MVC, je l'ai mentionné à un de mes amis concepteur et il m'a dit que depuis, il fallait que ce soit complètement téléchargé avant que la page ne commence rendre.

Hope this helps