knockout.나는 js를 써 보았다.
12505 단어 jQueryJavaScriptknockoutjs
knockout.나는 js를 써 보았다.
어쨌든 샘플도 많은 것 같아서 토도를 설치했습니다.
견본
・ 입력한 텍스트를 일람표에 표시합니다.
・ 체크된 항목에 삭제 버튼이 표시됩니다.
・대량 삭제를 설치해 보았습니다.
·jQuery도 협업을 시도했습니다(특별한 필요는 없습니다).
backbone.js보다 이해하기 쉬워요.
단지 대형 사이트와 복잡한 UI인가, 아니면 백본인가.js가 더 잘 어울릴 것 같아요.
예쁘게 걸어주세요!
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>todo</title>
<script type="text/javascript"
src="http://codeorigin.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js">
</script>
<script>
$(function(){
//Model
var TodoModel = function(value){
self = this;
self.todo = ko.observable(value);
self.check = ko.observable(false);
};
//ViewModel
var TodoViewModel = function(){
var self = this;
self.todoList = ko.observableArray(); //todoリスト
self.todoInputValue = ko.observable(''); //追加todoテキスト
//追加
self.addTodo = function(obj, e)
{
if( !self.todoInputValue() )return; //空文字の場合は処理しない
// Todoリストに追加
self.todoList.unshift( new TodoModel( self.todoInputValue() ) );
self.todoInputValue('');
};
// 削除
self.removeTodo = function(obj, e)
{
// 第1引数にはModel、第2引数にはイベントが渡される
//self.todoList.remove(obj);
// thisもobjと同じでmodelを指してる
self.todoList.remove(this);
};
// 一括削除
self.allClear = function(){
if ( confirm("チェックされているデータを一括削除します。本当によろしいですか？")){
// checkされているものだけ削除
var removeList = self.todoList.remove(function(todo){return ko.utils.unwrapObservable(todo.check)});
// 削除件数が返ってくる
if (removeList.length <= 0){
alert("削除対象が選択されていません。");
}
}
};
// なくても良い。アニメーションとか付ける場合
self.todoFadeIn = function(element, index, data){
// 他のnodeTypeでも動作するので「要素」のみ対象にする
if (element.nodeType === 1) {
$(element).hide().fadeIn(1500);
}
};
self.todoFadeOut = function(element, index, data){
if (element.nodeType === 1) {
$target = $(element);
$target.fadeOut(1500).queue(function() {
$target.remove();
});
}
};
};
ko.applyBindings( new TodoViewModel() );
});
</script>
</head>
<body>
<p>
<input type="text" value="" placeholder="TODOを入力" data-bind="value: todoInputValue"> <button data-bind="click: addTodo">追加</button> <button data-bind="click: allClear">チェックしている項目を一括削除</button>
</p>
<!-- template を使用しないとbeforeRemove等のイベントが発生しない-->
<ul data-bind="template: {foreach: todoList, visible: todoList().length>0, afterAdd: todoFadeIn, beforeRemove: todoFadeOut}">
<li>
<input type="checkbox" data-bind="checked: check">
<span data-bind="text: todo">Todo</span>
<button data-bind="visible: $data.check, click: $root.removeTodo">削除</button>
</li>
</ul>
</body>
</html>
Reference
이 문제에 관하여(knockout.나는 js를 써 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/astrsk_hori/items/3b265683d725bc165d6e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>todo</title>
<script type="text/javascript"
src="http://codeorigin.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js">
</script>
<script>
$(function(){
//Model
var TodoModel = function(value){
self = this;
self.todo = ko.observable(value);
self.check = ko.observable(false);
};
//ViewModel
var TodoViewModel = function(){
var self = this;
self.todoList = ko.observableArray(); //todoリスト
self.todoInputValue = ko.observable(''); //追加todoテキスト
//追加
self.addTodo = function(obj, e)
{
if( !self.todoInputValue() )return; //空文字の場合は処理しない
// Todoリストに追加
self.todoList.unshift( new TodoModel( self.todoInputValue() ) );
self.todoInputValue('');
};
// 削除
self.removeTodo = function(obj, e)
{
// 第1引数にはModel、第2引数にはイベントが渡される
//self.todoList.remove(obj);
// thisもobjと同じでmodelを指してる
self.todoList.remove(this);
};
// 一括削除
self.allClear = function(){
if ( confirm("チェックされているデータを一括削除します。本当によろしいですか？")){
// checkされているものだけ削除
var removeList = self.todoList.remove(function(todo){return ko.utils.unwrapObservable(todo.check)});
// 削除件数が返ってくる
if (removeList.length <= 0){
alert("削除対象が選択されていません。");
}
}
};
// なくても良い。アニメーションとか付ける場合
self.todoFadeIn = function(element, index, data){
// 他のnodeTypeでも動作するので「要素」のみ対象にする
if (element.nodeType === 1) {
$(element).hide().fadeIn(1500);
}
};
self.todoFadeOut = function(element, index, data){
if (element.nodeType === 1) {
$target = $(element);
$target.fadeOut(1500).queue(function() {
$target.remove();
});
}
};
};
ko.applyBindings( new TodoViewModel() );
});
</script>
</head>
<body>
<p>
<input type="text" value="" placeholder="TODOを入力" data-bind="value: todoInputValue"> <button data-bind="click: addTodo">追加</button> <button data-bind="click: allClear">チェックしている項目を一括削除</button>
</p>
<!-- template を使用しないとbeforeRemove等のイベントが発生しない-->
<ul data-bind="template: {foreach: todoList, visible: todoList().length>0, afterAdd: todoFadeIn, beforeRemove: todoFadeOut}">
<li>
<input type="checkbox" data-bind="checked: check">
<span data-bind="text: todo">Todo</span>
<button data-bind="visible: $data.check, click: $root.removeTodo">削除</button>
</li>
</ul>
</body>
</html>
Reference
이 문제에 관하여(knockout.나는 js를 써 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/astrsk_hori/items/3b265683d725bc165d6e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
