javascript - 将对象推送到 observableArray

Question

knockoutjs 新手，我正在遵循有关加载和保存数据的教程，但我遇到了一些麻烦。当我将对象推送到数组时，该数组为空。我也在使用表格。这是我的代码，

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

您应该将包含可观察值的对象(或数组)作为参数传递给 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>