74 lines
2.3 KiB
Plaintext
74 lines
2.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!-- need to load jq-query cdn or file. -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
|
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
|
|
<!-- need to load mustache cdn or file. -->
|
|
<script src="
|
|
https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js
|
|
"></script>
|
|
|
|
<!-- need to load jq-repeat cdn or file -->
|
|
<script type="text/javascript" src='/static/lib/js/jq-repeat_new.js'></script>
|
|
<script>
|
|
//on document ready. the logic would execute.
|
|
$(document).ready(function () {
|
|
$.scope.toDo.__setPut(function($el, item, list){
|
|
$el.slideDown('slow');
|
|
})
|
|
|
|
// $.scope.toDo.__setUpdate(function($el, $render, item, list){
|
|
// $el.fadeOut(2000, function() {
|
|
// $(this).html($render.html()).fadeIn(2000);
|
|
// });
|
|
// });
|
|
|
|
// $.scope.toDo.__setUpdate(function($el, $render, item, list){
|
|
// $el.animate({'opacity': 0}, 400, function(){
|
|
// $(this).html($render.html()).animate({'opacity': 1}, 400);
|
|
// });
|
|
// });
|
|
|
|
$.scope.toDo.__setUpdate(function($el, $render, item, list){
|
|
$el.slideUp(function(){
|
|
$(this).replaceWith($render)
|
|
$render.slideDown()
|
|
})
|
|
});
|
|
|
|
|
|
$.scope.toDo.push({ item: "Get milk", done: "Yes" }); // 0
|
|
$.scope.toDo.push({ item: "Do laundry", done: "No" }); // 1
|
|
//should take array id or array key
|
|
|
|
// - **howMany** _Type: Number_
|
|
// Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument.
|
|
// - **update** _Type: Array_
|
|
// This is the array of repeat objects to add. If there are none to this is not required.
|
|
|
|
//remove works
|
|
// $.scope.toDo.splice("Get milk" , "1")
|
|
|
|
//update
|
|
$.scope.toDo.splice(-1,0, { item: "Get Bread", done: "Yes" })
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<ul>
|
|
<li jq-repeat="toDo" jq-repeat-index="item" style="display:none;"><span class="item">{{ item }}</span>: {{ done }}</li>
|
|
</ul>
|
|
</body>
|
|
|
|
</html> |