KO Quzi

by Mark Carpenter Jr

HTML

<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>

JavaScript

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));
  };
  function Quiz(data) {
    this.quiz_name = ko.observable(data.newQuizName);
    this.quiz_type = ko.observable(data.newQuizType);
  }
}

ko.applyBindings(new QuizViewModel());