가장 간단한 knockout.js 샘플을 사용할 수 없습니까?

이것은 정말로 나를 괴롭힌다. knockout.js의 Hello World example을보십시오. 바인딩이 작동하지 않습니다,가장 간단한 knockout.js 샘플을 사용할 수 없습니까?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Home Page</title> 
    <script src="knockout-1.2.1.debug.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     // Here's my data model 
     var viewModel = { 
      firstName: ko.observable("Planet"), 
      lastName: ko.observable("Earth") 
     }; 
     viewModel.fullName = ko.dependentObservable(function() { 
      // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
      return viewModel.firstName() + " " + viewModel.lastName(); 
     }); 

     ko.applyBindings(viewModel); // This makes Knockout get to work 
    </script> 

</head> 
<body> 
    <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> 
</body> 
</html>

것 같다 :

여기 내 코드입니다. 내가 alert(viewModel.fullName()); 인 경우 "Planet Earth"가 예상대로 나옵니다. 그러나 입력 요소 나 범위는 데이터로 채워지지 않습니다.

내가 뭘 잘못하고 있니?

Here, 당신은 한 가지를 놓치고 내 파일 knockout.js에 대한 데모를 보면 knockout.js

출처

2011-08-22 Sandro

문제입니다.

스크립트 태그를 맨 아래로 이동하거나 onload 또는 jQuery의 준비 기능과 같이 실행하려고합니다.

출처

2011-08-22 23:54:23

-2

모두를 포함하는 zip 파일입니다. 당신은 dependentObservable 함수에서 매개 변수로 뷰 모델을 전송하지 않는 : 당신이 너무 빨리 ko.applyBindings를 호출하는 것을

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

출처

2011-08-22 23:28:56 gislikonrad

그것은 트릭을하지 않는다. 그리고이 예제에서는 dependentObservable에 대한 viewModel 매개 변수도 없습니다. – Sandro

어떤 브라우저를 사용하고 있습니까? Chrome을 사용하고 있습니다. Mac 및 여기에서 작업 할 정확한 코드를 얻었습니다. http://jsfiddle.net/3Appe/1/ – gislikonrad

@ GísliKonráð jsfiddle에서 코드가 작동하는 이유는 로드시 js 라이브러리를 실행하십시오. – Zack

보기가로드되면 ko.applyBindings()이 호출되면 데이터가 자동으로 컨트롤에 바인딩됩니다.

출처

2012-06-21 11:34:22 Ajay

이것은 KnockoutJs 자습서의 작동 버전입니다. 값이 어레이를 사용하기 전에 바로 체크 기능을 불 바인딩되지 않은 경우

<!DOCTYPE html> 
<html> 
<head> 

    <link rel="stylesheet" type="text/css" href="style/monitor.css"> 
    <script type="text/javascript" src="js/knockout-2.3.0.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function WebmailViewModel() { 
      // Data 
      var self = this; 
      self.folders = [ 'Inbox', 'Archive', 'Sent', 'Spam' ]; 
      self.chosenFolderId = ko.observable(); 
      self.chosenFolderData = ko.observable(); 
      self.chosenMailData = ko.observable(); 

      // Behaviours  
      self.goToFolder = function(folder) { 
       self.chosenFolderId(folder); 
       self.chosenMailData(null); // Stop showing a mail 
       $.get('/mail', { 
        folder : folder 
       }, self.chosenFolderData); 
      }; 
      self.goToMail = function(mail) { 
       self.chosenFolderId(mail.folder); 
       self.chosenFolderData(null); // Stop showing a folder 
       $.get("/mail", { 
        mailId : mail.id 
       }, self.chosenMailData); 
      }; 

      // Show inbox by default 
      self.goToFolder('Archive'); 
     }; 


    </script> 
</head> 
<body onload="ko.applyBindings(new WebmailViewModel());"> 
    <!-- Folders --> 
    <ul data-bind="foreach: folders"> 
     <li> 
      The current folders are: <b data-bind="text: $data"></b> 
     </li> 
    </ul> 
    </body> 
    </html>

출처

2013-08-26 07:39:21

그냥 .. 스크립트의 시작 부분에

window.onload= function() { 

    // Here's my data model 
    var viewModel = { 
...... 
    ko.applyBindings(viewModel); // This makes Knockout get to work 
    } 
</script>

출처

2013-09-03 18:58:04

-2

을 위해 window.onload =() 함수를 추가합니다. 녹아웃에서 당신은 이것을 할 수있다

< !-- ko if:detail() --> 


    --your HTML code to display the fields goes here-- 


<!-- /ko -->

출처

2014-10-23 03:45:07

가장 간단한 knockout.js 샘플을 사용할 수 없습니까?

답변

관련 문제