observavblearray에 값을 푸시 할 수 없습니다.

Question

왜이 작은 코드가 제대로 작동하지 않는지 이해할 수 없습니다. 도움을 청하십시오! 내가 시도하는 것은 배열에 텍스트 상자 값을 푸시 한 다음 바인딩을 사용하여 텍스트를 다시 표시하는 것입니다. HTML 코드는 다음과 같습니다

<div> 
Add Task:<input type="text" placeholder="abcd" data-bind="value:viewModel.newTask"/> 
    <input type="button" value="add" data-bind="click:viewModel.addTask" /> 
</div> 

<div data-bind="foreach:viewModel.tasks" ></div>  

JS 스크립트입니다 :

var viewModel = function (items) { 
var self = this; 

self.newTask = ko.observable(); 
self.tasks = ko.observableArray(items); 

self.addTask = function() { 
    self.tasks().push(self.newTask()); 
    self.newTask(" "); 

} 

ko.applyBindings(viewModel(["alpha","beta","gamma"])); 
}   

내가 또한 JSFiddle에서 그것을 시도 :

http://jsfiddle.net/Rakz_1221/m3rwupmz/1/

Answer 1

첫째로, 당신은 포함하지 않은 KnockoutJS을에 JSFiddle 데모, 어쨌든 데모가 작동하지 않습니다.

문제는 tasks.push입니다. tasks 자체가 배열이 아닙니다. tasks은 넉 아웃 관찰 기능입니다. 값을 밀어 넣으려면 대신 tasks().push()을 호출하여이 함수를 실행해야합니다.

제임스 트로프 (James Thrope)가 댓글을 달았습니다. 실제로 tasks.push으로 전화를 걸 수 있습니다. 죄송합니다.

마지막으로 귀하의 ko.applyBindings(...)은 귀하의 viewModel 기능에 포함되어 있으므로 절대 호출되지 않습니다. 귀하는 언제든지 전화하지 않습니다.

KnockoutJS의 대화 형 자습서 (http://learn.knockoutjs.com)를 사용하는 것이 좋습니다.