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
都有值。任何帮助将非常感激。
最佳答案
您应该将包含可观察值的对象(或数组)作为参数传递给 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>
关于javascript - 将对象推送到 observableArray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47270557/