ko.applyBindings를 호출 할 때“Cannot read property 'nodeType'of null”발생
이 녹아웃 코드가 있습니다.
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}
function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel());
이 HTML :
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h3>Tasks</h3>
<form data-bind="submit: addTask">
Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
<button type="submit">Add</button>
</form>
<ul data-bind="foreach: tasks, visible: tasks().length > 0">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
<a href="#" data-bind="click: $parent.removeTask">Delete</a>
</li>
</ul>
You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
</body>
이 예제는 Knockout 웹 사이트에있는 것과 동일하지만 실행하면 Chrome Fire Bug에 다음 메시지가 반환됩니다.
포착되지 않은 TypeError : null의 'nodeType'속성을 읽을 수 없습니다.
이것은 녹아웃 파일과 내 스크립트의 다음 줄과 관련이 있습니다.
ko.applyBindings(new TaskListViewModel());
그리고이 오류는 녹아웃에서이 줄 (1766)을 가리 킵니다.
var isElement = (nodeVerified.nodeType == 1);
내가 뭘 잘못하고 있죠?
이 문제는 HTML요소가 생성되기 전에 바인딩을 시도했기 때문에 발생 했습니다.
내 스크립트는 상단 HTML(머리)에로드되었지만 HTML코드 하단 (닫는 body 태그 바로 앞)에 로드 해야했습니다.
관심을 가져 주셔서 감사합니다 . James Allardice .
가능한 해결 방법은 다음을 사용하는 것입니다. defer="defer"
<script src="script.js" type="text/javascript" defer="defer"></script>
Use this if the script is not going to generate any document content. This will tell the browser that it can wait for the content to be loaded before loading the script.
Hope it helps.
You might want to consider using the jquery ready handler for this
$(function() {
function TaskListViewModel() {
...
ko.applyBindings(new TaskListViewModel());
});
Then you achieve two things:
- Avoid polluting the global namespace
- Knockout binding occurs AFTER the DOM is created. You can place your javascript wherever it is suited for organization.
See http://api.jquery.com/ready/
if you have jQuery put apply binding inside onload so that knockout looks for the DOM when DOM is ready.
$(document).ready(function(){
ko.applyBindings(new TaskListViewModel());
});
You have a simple spelling mistake:
self.addTask = fuction() {
Should be:
self.addTask = function() { //Notice the added 'n' in 'function'
'code' 카테고리의 다른 글
| QMessageBox를 사용하는 예 / 아니오 메시지 상자 (0) | 2020.08.20 |
|---|---|
| DataTemplate에서 부모 DataContext에 액세스 (0) | 2020.08.20 |
| 배열의 모든 요소를 Java의 특정 값으로 초기화하는 방법 (0) | 2020.08.20 |
| 다른 프로필이 활성화 된 경우에도 activeByDefault 인 Maven 프로필을 활성 상태로 유지하는 방법은 무엇입니까? (0) | 2020.08.19 |
| SQL Server에서 group_concat을 사용하여 쿼리를 만드는 방법 (0) | 2020.08.19 |