オブジェクトを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()); 

であり、これは私のHTML

<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の両方が値を持っているそうであるように私が間違っているのかわからです。どんな助けでも大歓迎です。

Answer 1

observablesを含むオブジェクト（または配列）を引数として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>