2016-08-10 3 views
0

녹아웃을 사용하고 사용자가 입력 한 이름과 성을 함께 사용하려고합니다. 이 예제를 기반으로합니다 : http://knockoutjs.com/examples/helloWorld.html녹아웃 : 이름 - 성이없는 조이너가 작동하지 않습니다.

녹아웃에 대한 느낌을 얻기 위해 약간의 기능 변경을 시도했습니다. 코드는 좋았지 만 출력은 변하지 않았습니다. 그런 다음 튜토리얼의 정확한 코드가 나를 위해 작동하는지 테스트했지만 그렇지 않습니다. 나는 정말로 명백한 것을 놓치고 있다고 확신한다. 누군가 그게 뭔지 말해 줄 수 있어요?

이 내 HTML입니다 :

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<!--view--> 
<head> 
    <meta charset="utf-8" /> 
    <title>Testing Knockout</title> 
    <script src="knockoutTester.js"></script> 
    <script src="knockout-3.4.0.js"></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> 

이 내 JS입니다 :

var ViewModel = function (first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 

    this.fullName = ko.pureComputed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
};  
ko.applyBindings(new ViewModel("Planet", "Earth")); 

감사

+0

knockoutTester.js 무엇을 파일 (DOM 위로드 된 후에 만 ​​부하 그렇게)? JS 코드가이 파일에 저장되어 있습니까? – dotnetom

+0

@dotnetom 예, JS 코드는 knockoutTester.js 파일에 저장됩니다. –

답변

3

귀하의 JS 코드가 괜찮습니다.

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

위해 당신의 코드를 먼저 넉 아웃을로드 할 필요가 작동, 오직 다음 사용자 지정 코드를로드 : 문제는 당신이 당신의 HTML 파일에 JS 파일을 추가하는 순서입니다. 따라서 위의 줄을

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

으로 변경하면 작업이 시작됩니다.

DOM을로드 한 후에 만 ​​사용자 지정 JavaScript 코드가 실행되도록해야합니다. 스크립트를 실행할 때 모든 DOM 요소가로드되어야하기 때문입니다. jQuery의 방법 $(document).ready을 사용하거나 다른 대안을 사용할 수 있습니다 (예 : $(document).ready equivalent without jQuery에서 설명).

이 또는 당신 몸의 맨 아래에있는 라인 <script src="knockoutTester.js"></script>을 포함 할 수

+0

두 개를 전환했지만 여전히 작동하지 않았습니다. 고마워, 너는 정말로 중요한 것을 잡았어. 이것은 까다 롭습니다. –

+0

@TheWorldSoul DOM을로드 한 후 또는 'body' 요소의 맨 아래에 사용자 정의 스크립트를로드 한 후에 만 ​​스크립트를 실행 해 보았습니까? 세부 사항으로 답변을 업데이트했습니다. – dotnetom

+0

본문 맨 아래에 knockoutTester.file의 src를 추가했습니다. 하지만 여전히 작동하지 않습니다. 내가 자바 스크립트 파일의 상단에 녹아웃에 대한 몇 가지 초기화를해야합니까? 나는 그것의 불완전한 느낌. –

관련 문제