오브젝트를 observableArray에 푸시

Question

knockoutjs를 처음 접했고 Loading and saving data에있는 지침서를 따르고 있었지만 조금 문제가 있습니다. 객체를 배열에 푸시하면 배열이 비어 있습니다. 나는 또한 양식을 사용하고있다. 여기에 내 코드,

function Quiz(data) { 
    this.quiz_name = ko.observable(data.newQuizName); 
    this.quiz_type = ko.observable(data.newQuizType); 
} 


function QuizViewModel() { 
    var self = this; 
    self.quizzes = ko.observableArray([]); 
    self.newQuizName = ko.observable(); 
    self.newQuizType = ko.observable(); 

    self.addQuiz = function() { 
     self.quizzes.push(new Quiz({quiz_name: this.newQuizName(), quiz_type: this.newQuizType()})) 
     console.log(ko.toJSON(self.quizzes)); 
    }; 
} 

ko.applyBindings(new QuizViewModel()); 

이며,이

<form name="quizzes" id="new-form-quizzes" data-bind="submit: addQuiz" style="display:none"> 
    <div class="form-group"> 
     <label for="quiz-name">Quiz Name</label> 
     <input type="text" class="form-control" id="quiz-name" aria-describedby="quiz name" 
       data-bind="value: newQuizName" 
       placeholder="Quize Name"/> 
    </div> 
    <div class="form-group"> 
     <label for="quiz-type">Quiz Type</label> 
     <input type="text" 
       class="form-control" 
       id="quiz-type" 
       data-bind="value: newQuizType" 
       placeholder="Quiz Type"/> 
    </div> 
    <button type="submit">Save</button> 
</form> 

없음 내가 newQuizName 및 newQuizType 모두 같은 잘못하고 있어요 무엇인지 값이 어떻게 내 HTML입니다. 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

관측 값을 포함하는 객체 (또는 배열)를 인수로 사용하여 ko.toJSON에 전달해야합니다. 관측 가능 자체는 아닙니다. 코드를 다음과 같이 변경해야합니다.

ko.toJSON(self.quizzes()); 

ko.toJSON internally calls ko.toJS. 후자의 방법은 객체를 관통하고 각 관측 값을 관측 가능 값으로 변환합니다.

---

이 변경을 한 후에는 다른 문제가 있음을 알 수 있습니다. 새로 추가 된 Quiz 개체의 속성은 undefined입니다. 이는 quiz_name 및 quiz_type 인 객체를 Quiz 생성자 함수에 전달하기 때문입니다. 그러나 data 매개 변수에서 newQuizName 속성에 액세스하고 있습니다. 당신의 도움에 대한

function Quiz(data) { 
 
    this.quiz_name = ko.observable(data.quiz_name); // these 2 props must be changed 
 
    this.quiz_type = ko.observable(data.quiz_type); 
 
} 
 

 

 
function QuizViewModel() { 
 
    var self = this; 
 
    self.quizzes = ko.observableArray([]); 
 
    self.newQuizName = ko.observable(); 
 
    self.newQuizType = ko.observable(); 
 

 
    self.addQuiz = function() { 
 
    self.quizzes.push(new Quiz({ 
 
     quiz_name: this.newQuizName(), 
 
     quiz_type: this.newQuizType() 
 
    })); 
 

 
    console.log(ko.toJSON(self.quizzes())); 
 
    }; 
 
} 
 

 
ko.applyBindings(new QuizViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<form name="quizzes" id="new-form-quizzes" data-bind="submit: addQuiz"> 
 
    <div class="form-group"> 
 
    <label for="quiz-name">Quiz Name</label> 
 
    <input type="text" class="form-control" id="quiz-name" aria-describedby="quiz name" data-bind="value: newQuizName" placeholder="Quize Name" /> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="quiz-type">Quiz Type</label> 
 
    <input type="text" class="form-control" id="quiz-type" data-bind="value: newQuizType" placeholder="Quiz Type" /> 
 
    </div> 
 
    <button type="submit">Save</button> 
 
</form> 
 

 
<!--Table to display the added quizzes--> 
 
<table data-bind="if: quizzes() && quizzes().length > 0"> 
 
    <thead> 
 
    <th>Quiz Name</th> 
 
    <th>Quiz Type </th> 
 
    </thead> 
 
    <tbody data-bind="foreach: quizzes"> 
 
    <tr> 
 
     <td data-bind="text:quiz_name"></td> 
 
     <td data-bind="text:quiz_type"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>