�@ |
�A�ځF�`ScottGu���̃u���O���`jQuery�e���v���[�g�ƃf�[�^�E�����L���O�i������jQuery�ւ�Microsoft�̍v���jScott Guthrie ���^Chica ��2010/05/12 |
|
|
�@jQuery���C�u�����͏�M�I�ȊJ���҂̃R�~���j�e�B�������Ă��܂��B�����Ă���͍����AWeb��ōł��L���g�p����Ă���JavaScript���C�u�����ł��B
�@2�N�O�AMicrosoft��jQuery�̐��i�T�|�[�g�̒��J�n���邱�ƁA����э���Visual Studio�̐V�o�[�W�����Ɋ܂߂Ă������Ƃɂ������\���܂����B�f�t�H���g�ł́A�V����ASP.NET Web�t�H�[���܂���ASP.NET MVC�̃v���W�F�N�g��VS 2010�ō쐬����ƁA�v���W�F�N�g�Ɏ����I��jQuery���lj�����Ă��邱�Ƃ��m�F�ł��܂��B
�@���T�ԑO�AMIX 2010�J���t�@�����X�ł�2��ڂ̊�u�����ɁAMicrosoft��jQuery�v���W�F�N�g�ւ̍v�����J�n���邱�Ƃ\���܂����B�������ɁAjQuery���C�u�����̍쐬�҂�jQuery�J���`�[���̃��[�_�[�ł���John Resig�����킽�������̎Q���ɂ��ď������AjQuery�̐V�����N���C�A���g���e���v���[�g������API�̑����v���g�^�C�v�ɂ��Ęb���܂����B
�@���̃u���O���e�ł́A�킽���̃`�[����jQuery�v���W�F�N�g�ւǂ̂悤�ɍv�����n�߂����ɂ��ď����b���A�N���C�A���g�T�C�h�E�e���v���[�g�����f�[�^�E�����L���O�i�f�[�^�E�o�C���f�B���O�j�ȂǁA����̋@�\�ɂ��Ă������b���܂��B
jQuery�ւ̍v��
�@jQuery�ɂ͑f���炵���J���҃R�~���j�e�B������A��Ă�v���̂��߂̔��ɊJ���ꂽ���@����Ă��܂��BMicrosoft�̓R�~���j�e�B�̂ق��̃����o�[�Ɠ����v���Z�X��jQuery�֍v�����܂��B
�@��Ƃ��ẮAjQuery�̃e���v���[�g���ɑ���T�|�[�g�����P���邽�߂�jQuery�R�~���j�e�B�֓����������Ƃ��ɁA�킽���̃`�[���͈ȉ��̃X�e�b�v���̂�܂����B
1. �e���v���[�g���̃T�|�[�g�ւ̒�Ă��쐬���AjQuery�J���҃t�H�[�����ւ��̒�Ă𓊍e���܂����ihttp://forum.jquery.com/topic/jquery-templates-proposal��http://forum.jquery.com/topic/templating-syntax�j
2. �t�H�[�����Ńt�B�[�h�o�b�N������AjQuery�`�[���̓e���v���[�g���ɑ���v���g�^�C�v���쐬���AGithub�R�[�h�E���|�W�g���ɓ��e���܂����ihttp://github.com/jquery/jquery-tmpl�j
3. �d�l���P���Ă��邽�߂ɁA�e���v���[�g���v���g�^�C�v��Github�ɐV�����t�H�[�N�ifolk�j���쐬���āA���̃v���g�^�C�v�̋c�_���J��Ԃ��܂����B�R�~���j�e�B�̉��l���̂ق��̃����o�[���A���̃e���v���[�g���R�[�h���t�H�[�N���邱�ƂŎd�l�̃t�B�[�h�o�b�N����Ă��܂���
�@���̃e���v���[�g���̒�Ăɑ��ẮAjQuery�R�~���j�e�B����������̎Q��������ijQuery�t�H�[������100�ȏ�̓��e�j�A���̃e���v���[�g���̒�Ă̎d�l�̓R�~���j�e�B�̃t�B�[�h�o�b�N�Ɋ�Â��Ē������W�J���Ă��܂��B
�@jQuery�`�[���́A���̃e���v���[�g���̒�Ă̏ɂ��āA���ꂪjQuery�R�A�Ɋ܂܂��̂��A���I�ȃv���O�C���ɂȂ�̂��A���ׂċp�������̂��A�Ȃǂ����߂�ŏI����҂ł��B�킽���̃`�[���́A�I�[�v���\�[�X�̃v���Z�X�ɎQ���ł��A�ق��̃R�~���j�e�B�̃����o�[�Ɠ������@�Œ�Ă�v�����ł��邱�Ƃ����ł��܂��B
jQuery�e���v���[�g�E�T�|�[�g
�@�N���C�A���g���̃e���v���[�g�ɂ��AjQuery�J���҂͊ȒP�ɃN���C�A���g���HTML UI�����ĕ`��ł��܂��B�e���v���[�g�͊J���҂܂��̓f�U�C�i�[������������HTML��錾�I�Ɏw��ł���V���v���ȍ\�����T�|�[�g���܂��B�����ĊJ���҂́A�v���O�����ł��̃e���v���[�g���N���C�A���g��ŋN�����A���S�ȃf�[�^�쓮�ɂ��R���e���c��`��ł���悤��JavaScript�I�u�W�F�N�g�������n���܂��B������JavaScript�I�u�W�F�N�g�̓I�v�V�����ŁA�T�[�o����擾�����f�[�^�Ɋ�Â����Ƃ��ł��܂��B
�@jQuery�̃e���v���[�g���̒�ẮA�R�~���j�e�B�̃t�B�[�h�o�b�N�ɑΉ����ĉ��ǒ��ł��邽�߁A�ŏI�o�[�W�����͈ȍ~�ŏq�ׂĂ���o�[�W�����Ƃ͑S�R�قȂ邩������܂���B���̃u���O���e�ł́A�����_�Ńe���v���[�g���ǂ̂悤�Ɏ����Ďg����̂��A���̊��G������ł��炤���߂̂��ł��B�ihttp://github.com/jquery/jquery-tmpl��jQuery�R�A�E�`�[���̃v���g�^�C�v�A�܂���http://github.com/nje/jquery-tmpl�ł킽���̃`�[������̍ŐV���e���_�E�����[�h�ł��܂��j�B
��jQuery�N���C�A���g�E�e���v���[�g
�@<script type="text/html">�^�O���ɃR���e���c�ߍ���ŁA�N���C�A���g����jQuery�e���v���[�g���쐬���܂��B�Ⴆ�A�ȉ���HTML�ɂ�<div>�e���v���[�g�E�R���e�i�A����јA����ꗗ�I�ɕ\�������邽�߂Ɏg�p������N���C�A���g����jQuery�gcontactTemplate�h�e���v���[�g�i<script type="text/html">�v�f���j���܂܂�Ă��܂��B
�}1 |
�@{{= name }}��{{= phone }}���́A��L�̃R���^�N�g�E�e���v���[�g���Ńe���v���[�g�Ɉ����n���ꂽ�gcontact�h�I�u�W�F�N�g�̖��O��d�b�ԍ���\�������邽�߂Ɏg�p����܂��B
�@�e���v���[�g�́AJavaScript�I�u�W�F�N�g�̔z��܂���1�̃I�u�W�F�N�g��\������̂Ɏg�p�ł��܂��B�ȉ���JavaScript�R�[�h�́A��L�̃e���v���[�g���g�p���āgcontact�h�I�u�W�F�N�g��JavaScript�z���`�悷����@�������Ă��܂��Brender���\�b�h�͕�����Ƃ��ăf�[�^��`�悵�A�gcontactContainer�hDIV�v�f�ւ��̕������lj����܂��B
�}2 |
�@�y�[�W�����[�h�����ƁA�A����ꗗ�̓e���v���[�g�ɂ��`�悳��܂��B���̃e���v���[�g�ł̕`��͂��ׂāA�u���E�U���̃N���C�A���g���ŋN���������̂ł��B
�}3 |
���e���v���[�g�̃R�}���h�Ə����\���̃��W�b�N
�@���݂̃e���v���[�g���̒�Ăł́Aif�Aelse�Aeach�X�e�[�g�����g�Ȃǂ��܂ރe���v���[�g�E�R�}���h�̏�����1�Z�b�g���T�|�[�g���Ă��܂��B�e���v���[�g�E�R�}���h�̐��́A�e���v���[�g�O�ł����ƕ��G�ȃ��W�b�N���z�u�ł���悤�Ɍ̈ӂɏ���������Ă��܂��B
�@�������A����ȏ������e���v���[�g�E�R�}���h�̃Z�b�g�ł����ɕ֗��ł��B�Ⴆ�A�e�A����ɓd�b�ԍ���0�ȏ゠�����Ƃ��܂��B���̊e�A����͈ȉ��̂悤��JavaScript�z��ŕ\������܂��B
�}4 |
�@�ȉ��̃e���v���[�g�́Aif��each�e���v���[�g�E�R�}���h���ǂ̂悤�Ɏg���ď����ʂɊe�A����̓d�b�ԍ���\�������ă��[�v�����邩�������Ă��܂��B
�}5 |
�@�����A�����1�ȏ�̓d�b�ԍ�������A�e�d�b�ԍ���each�e���v���[�g�E�R�}���h�Ŕ������ĕ\������܂��B
�}6 |
�@jQuery�`�[���́A�e���v���[�g�E�R�}���h��v���Ċg�������������܂����B�V�����e���v���[�g�E�R�}���h���K�v�ȏꍇ�A�ȒP�ɐV�����e���v���[�g�E�R�}���h���f�t�H���g�̃R�}���h�E�Z�b�g�ɒlj��ł��܂��B
�N���C�A���g�̃f�[�^�E�����L���O�E�T�|�[�g
�@ASP.NET�`�[���͍ŋ߁A����1�̒�Ăƃv���g�^�C�v��jQuery�t�H�[�����ɒ�o���܂����ihttp://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery�j�B���̒�Ă��f�[�^�E�����L���O�iData Linking�j�Ƃ������O�̐V�@�\�ɂ��ďq�ׂĂ��܂��B�f�[�^�E�����L���O�́A1�̃v���p�e�B���ύX���ꂽ�Ƃ��ɁA�ق��̃v���p�e�B���ύX�����悤�ɁA1�̃I�u�W�F�N�g�̃v���p�e�B������1�̃I�u�W�F�N�g�̃v���p�e�B�Ƀ����N�ł���悤�ɂ��܂��B�f�[�^�E�����L���O�ɂ��A�ȒP��UI�ƃf�[�^�E�I�u�W�F�N�g�̓������y�[�W���ŕۂĂ܂��B
�@�f�[�^�E�o�C���f�B���O�̊T�O�ɂȂ��݂�����A�f�[�^�E�����L���O��������₷���͂��ł��i��Ăł́A���̋@�\���f�[�^�E�����L���O�ƌĂ�ł��܂����A�����jQuery�ɂ��łɃf�[�^�E�o�C���f�B���O�Ƃ܂������W�Ȃ�bind���\�b�h�����邽�߂ł��j�B
�@�Ⴆ�A�ȉ���HTML��<input>�v�f���y�[�W�ɂ���Ƃ��܂��B
�}7 |
�@�ȉ���JavaScript�R�[�h�́A��L��2��INPUT�v�f���gname�h����сgphone�h�v���p�e�B������JavaScript�́gcontact�h�I�u�W�F�N�g�̃v���p�e�B�փ����N���܂��B
�}8 |
�@���̃R�[�h�����s����ƁA�ŏ���INPUT�v�f�i#name�j�̒l�ɘA�����name�v���p�e�B�̒l���ݒ肳��A����INPUT�v�f�i#phone�j�̒l�ɘA�����phone�v���p�e�B�̒l���ݒ肳��܂��Bcontact�I�u�W�F�N�g�̃v���p�e�B��INPUT�v�f�̃v���p�e�B�������N����Ă���̂ŁA1���ύX�����Ƃق��ɂ����f����܂��B
�@contact�I�u�W�F�N�g��INPUT�v�f�Ƀ����N����Ă���̂ŁA�y�[�W�����N�G�X�g�����contact�v���p�e�B�̒l���\������܂��B
�}9 |
�@�����Ɩʔ������ƂɁA�����N����Ă���contact�I�u�W�F�N�g�̃v���p�e�B���X�V����ƁA��Ƀ����N����Ă���INPUT�v�f�̒l�͎����I�ɕύX����܂��B
�@�Ⴆ�A�ȉ��̂悤��jQuery��attr���\�b�h���g�p���āA�gcontact�h �I�u�W�F�N�g�̃v���p�e�B���v���O�����ŏC�����܂��B
�}10 |
�@�gcontact�h�I�u�W�F�N�g��2��INPUT�v�f�������N���Ă���̂ŁAINPUT�v�f�̒l�͎����I�ɍX�V����܂��iUI�v�f���C������R�[�h�������K�v�͂���܂���j�B
�}11 |
�@jQuery��attr���\�b�h���g����contact�I�u�W�F�N�g���X�V�������Ƃɂ����ӂ��������B�f�[�^�E�����L���O���@�\�����邽�߂ɂ́AjQuery���\�b�h���g���ăv���p�e�B�̒l���C�����Ȃ���Ȃ�܂���B
���o���������N
�@linkBoth���\�b�h���o�����̃f�[�^�E�����L���O���\�ɂ��܂��Bcontact�I�u�W�F�N�g��INPUT�v�f�͑o�����Ƀ����N����Ă��܂��BINPUT�v�f�̒l���C������Ƃ��Acontact�I�u�W�F�N�g�������I�ɍX�V����܂��B
�@�Ⴆ�Έȉ��̃R�[�h�́A�N���C�A���g�T�C�hJavaScript��click�n���h����HTML�{�^���v�f�ɒlj����܂��B���̃{�^�����N���b�N����ƁAcontact�I�u�W�F�N�g�̃v���p�e�B�̒l��alert�_�C�A���O���g���ĕ\������܂��B
�}12 |
�@�ȉ��ł�Name��INPUT�v�f�̒l��ύX����Save�{�^�����N���b�N�����Ƃ��̏������Ă��܂��BINPUT�v�f�������N����Ă���gcontact�h�I�u�W�F�N�g��name�v���p�e�B�������ōX�V����Ă���Ƃ�����m�F���Ă��������B
�}13 |
�@��L�̗�͖��炩�ɕ��}�ŃV���v���ł��BJavaScript�A���[�g��contact�I�u�W�F�N�g�̐V�����l��\���������ɁA�I�u�W�F�N�g���f�[�^�x�[�X�֕ۑ�����Web�T�[�r�X���Ăяo�����Ƃ�z�����Ă��������B�f�[�^�E�����L���O�̗��_�́AUI�ƃf�[�^�̓������̎d�g�݂���J������āA�f�[�^�ɏW���ł���_�ł��B
���R���o�[�^
�@���݂̃f�[�^�E�����L���O�̒�Ă��R���o�[�^�ƌĂ��@�\���T�|�[�g���܂��B�R���o�[�^�ɂ��A�f�[�^�E�����L���O���Ă���ԁA�v���p�e�B�̒l���ȒP�ɕϊ��ł��܂��B
�@�Ⴆ�Acontact�I�u�W�F�N�g��phone�v���p�e�B�ɂ��A�W���̕��@�œd�b�ԍ���\���������ꍇ��z�����Ă��������B��̓I�ɂ́A�u�i�j�v�Ȃǂ̓��ʂȕ�����d�b�ԍ��Ɋ܂߂��A�����ȊO�ɉ����܂߂����Ȃ��悤�ȏꍇ�ł��B���̏ꍇ�A�ȉ��̃R�[�h���g�p���āA���̃t�H�[�}�b�g��INPUT�v�f�̒l��ϊ����邽�߂̃R���o�[�^��ڑ��ł��܂��B
�}14 |
�@��L�ł́AINPUT�v�f��phone�̒l�ƁA�gcontact�h�I�u�W�F�N�g��phone�v���p�e�B�������N����̂Ɏg�p����Ă���linkFrom���\�b�h�ցA�ǂ̂悤�ɃR���o�[�^�@�\�������n����Ă��邩���m�F���Ă��������B���̃R���o�[�^�@�\��phone�v���p�e�B���X�V����O��INPUT�v�f���炷�ׂĂ̐����ȊO�̕�������苎��܂��B�������܁A(206) 555-9999�Ƃ����d�b�ԍ���d�b���̓t�B�[���h�ɓ��͂���ƁA2065559999�Ƃ����l��contact�I�u�W�F�N�g��phone�v���p�e�B�Ɋ��蓖�Ă��܂��B
�}15 |
�@�܂��ϊ��͋t�̕����ɂ��g�p�ł��܂��B�Ⴆ�Aphone�v���p�e�B����d�b�ԍ���\������ہA�W���̓d�b�ԍ��t�H�[�}�b�g�������K�p�ł��܂��B
�e���v���[�g�ƃf�[�^�E�����L���O�̑g�ݍ��킹
�@�e���v���[�g���ƃf�[�^�E�����L���O�̂�����2�̒�Ă��o�����ړI�́AWeb�T�C�g��A�v���P�[�V������jQuery�ƈꏏ�ɍ\�z�����ۂɁA���ȒP�Ƀf�[�^��������悤�ɂȂ邱�Ƃł��B�e���v���[�g���ɂ��AAjax�̌Ăяo����ʂ��āA�f�[�^�x�[�X����擾�����f�[�^�x�[�X�̃��R�[�h�̈ꗗ���A���ȒP�ɕ\���ł���悤�ɂȂ�܂��B�f�[�^�E�����L���O�ɂ��A�X�V����V�i���I�Ńf�[�^�ƃ��[�U�[�E�C���^�[�t�F�C�X�̓������ȒP�ɕۂĂ�悤�ɂȂ�܂��B
�@���݁A�錾�I�f�[�^�E�����L���O���T�|�[�g���邽�߂ɁA�f�[�^�E�����L���O�̒�Ă̊g���Ɏ��|�����Ă��܂��B
�@�Ⴆ�A�ȉ��̃e���v���[�g���g�p���āAproduct�I�u�W�F�N�g�̔z���\������Ƃ����z�����Ă��������B
�}16 |
�@{{link name}}��{{link price}}���ɒ��ڂ��Ă��������B�����̎��ɂ��ASPAN�v�f��product�I�u�W�F�N�g�̃v���p�e�B�ԂŐ錾�I�ȃf�[�^�E�����L���O���\�ɂȂ�܂��B���݂�jQuery�̃e���v���[�g���̃v���g�^�C�v�́A�Ǝ��̃e���v���[�g�E�R�}���h�ł��̍\���̊g�����T�|�[�g���Ă��܂��B���̏ꍇ�A�glink�h�Ƃ������O�̓Ǝ��̃e���v���[�g�E�R�}���h�ɂ��A�f�t�H���g�̃e���v���[�g�̍\�����g�����Ă��܂��B
�@��L�̃e���v���[�g�Ńf�[�^�E�����L���O���g�p���闘�_�́A�gproduct�h�̔w��ɂ���f�[�^���X�V���ꂽ�Ƃ��͏�ɁASPAN�v�f�������I�ɍX�V����邱�Ƃł��B�܂��錾�I�ȃf�[�^�E�����L���O�ɂ��A���ȒP�ɕҏW����ё}���t�H�[�����쐬�ł���悤�ɂȂ�܂��B�Ⴆ�A�錾�I�f�[�^�E�����L���O�����̂悤�Ɏg�p���邱�ƂŁA���i��ҏW����t�H�[�����쐬�ł��܂��B
�}17 |
�@�錾�I�f�[�^�E�����L���O���g�p����e���v���[�g��INPUT�v�f�̒l��ύX����ƁA�������̉��ɂ���JavaScript�̃f�[�^�E�I�u�W�F�N�g�������I�ɍX�V����܂��BHTML�t�H�[������X�V���ꂽ�l����J���Ď擾���邽�߂̃R�[�h�������K�v���Ȃ��Ȃ�A����ɒ��ڔw��ɂ���f�[�^�ڎ�舵����̂ŁA�N���C�A���g���̃R�[�h�����N���[���ŃV���v���ɂȂ�܂��B
��L�̃V�i���I�̓���\�ȃR�[�h�̃_�E�����[�h
�@��L�V�i���I�̓���\�ȃR�[�h��́A����ZIP�t�@�C�����_�E�����[�h����Ύ擾�ł��܂��BZIP�t�@�C���ɂ�4�̐ÓIHTML�y�[�W���܂܂�Ă��܂��B
- Listing1_Templating.htm �| ��b�I�ȃe���v���[�g�̐���
- Listing2_TemplatingConditionals.htm �| if��each�e���v���[�g�E�R�}���h���g�p�����e���v���[�g�̐���
- Listing3_DataLinking.htm �| �f�[�^�E�����L���O�̐���
- Listing4_Converters.htm �| �f�[�^�E�����L���O�ŃR���o�[�^���g�p�������
�@�t�@�C���V�X�e���փt�@�C�����𓀂���A�e�y�[�W�����s���Ď��ۂɂ��̊T�O���m�F�ł��܂��B
�܂Ƃ�
�@�킽�������̓I�[�v���\�[�X��jQuery�v���W�F�N�g�ɎQ���ł���悤�ɂȂ�A���Ɋ��ł��܂��B�ŏ���2�̒�Ăɑ��ẮA��܂��̃t�B�[�h�o�b�N������������܂����B������������������I�ɍv�����Ă����܂��B�����̋@�\�ɂ��A���ׂĂ̊J���ҁiASP.NET�J���҂��܂ށj���f���炵��Ajax�A�v���P�[�V�������ȒP�ɍ\�z�ł���悤�ɂȂ�K���ł��B
�@Hope this helps,
�@Scott
P.S.�m�u���O�ɉ����A����Twitter���g���ĊȒP�ȍX�V����N���L���s���Ă��܂��Btwitter.com/scottgu�ŁA�킽�����t�H���[���Ă��������n
�@ | �@ |
�@�u�`ScottGu���̃u���O���`�v |
- ��2��@�Ȍ��ȃR�[�f�B���O�̂��߂� �i2017/7/26�j
�@�����_���ŋL�q�ł��郁���o�̑����Athrow���Aout�ϐ��A�^�v���ȂǁAC# 7�ɂ͈ȑO�����R�[�h���Ȍ��ɋL�q�ł���悤�ȋ@�\����������Ă��� - ��1��@Visual Studio Code�f�o�b�O�̊�b�m�� �i2017/7/21�j
�@Node.js�v���O�������f�o�b�O���Ȃ���AVisual Studio Code�ɓ�������Ă���f�o�b�O�@�\�̊�{�́u�L�v���}�X�^�[���悤 - ��1��@���ĂȃR�[�f�B���O�̂��߂� �i2017/7/19�j
�@C# 7�Œlj����ꂽ�V�@�\�̒�����A�u���l���e�����\���̉��P�v�Ɓu���[�J�����v���Љ��B�����͕�����₷���R�[�h���L�q����̂Ɏg���� - Presentation Translator �i2017/7/18�j
�@Presentation Translator��PowerPoint�p�̃A�h�C���B�v���[���e�[�V�������̎����̕t����A������ł̎��^�����A�X���C�h�̖|����s����
|
|