jsview, dynamic-templates, data-linking - Ok

HTML

<script src="http://www.jsviews.com/download/jsviews.min.js"></script>
<div id="main"></div>

<script id="newTmpl" type="text/x-jsrender">
	<table width="100%">
		<thead>
			<th>Question</th>
			<th>Questoin Type</th>
			<th>Actions</th>
		</thead>
		<tbody>
			<tr>
				<td>
					<textarea placeholder="Exam Question" rows="10" id="examQuestion" name="examQuestion" cols="20"></textarea>
        </td>
				<td>
					<select id="examQuestionType" name="examQuestionType"><option value="0" selected="selected">-- Please select question type --</option><option value="1">Radio Button</option><option value="2">Checkbox</option><option value="3">Textarea</option><option value="4">Text</option></select>
        </td>
				<td>
					<button class="addOrUpdateQuestion" type="button">Add / update</button>
        </td>
			</tr>
			{^{for questions}}
				<tr>
					<td>
						{{:question}}
					</td>
					<td>
						{{:typeName}}
					</td>
					<td>
						<button class="editQuestion" type="button">Edit</button>
          </td>
				</tr>
			{{/for}}
		</tbody>
	</table>
</script>

JavaScript

$(function() {
        var question = [{
            question: "test 1",
            typeName: "checkbox",
            type: '1'
        },{
            question: "test 2",
            typeName: "Text",
            type: '4'
        }];
        
      var app = {
        name: '',
        description: '',
        selectedQuestionId: -1,
        questions: question
      };

      var tmpl = $.templates("#newTmpl");
      tmpl.link("#main", app);

      $('#main').on('click', '.editQuestion', function() {
        var tmpData = $.view(this).data
        app.selectedQuestionId = $.view(this).index;
        $('#examQuestion').val(tmpData.question);
        $('#examQuestionType').val(tmpData.type);
      });

      $('#main').on('click', '.addOrUpdateQuestion', function() {
        if (app.selectedQuestionId == -1) {
          $.observable(question).insert({
            question: $('#examQuestion').val(),
            type: $('#examQuestionType').val(),
            typeName: $('#examQuestionType').find(':selected').text()
          });
      	} else {
          var tmpItem = app.questions[app.selectedQuestionId];
          tmpItem.question = $('#examQuestion').val();
          tmpItem.type = $('#examQuestionType').val();
          tmpItem.typeName = $('#examQuestionType').find(':selected').text();
          app.questions[app.selectedQuestionId] = tmpItem;
          $.observable(question).refresh(question);
        }
      });
    });