一步步做组件-学校选择器(6)
发布在一步步做组件-学校选择器2015年4月14日view:1935BrettBatWeb组件,模块化
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

界面设计

继续前面的设计风格,在学校选择器的底部添加如下一行。

enter image description here

同时在搜索结果列表的底部,当无匹配结果时,也添加如下一行。

enter image description here

扩展组件功能

1.在私有静态变量里添加元素copy

var $addSchoolCopy = $(
    '<div class="add-school-wrapper">' + 
        '<a href="javascript:void(0)" class="add-school-link">没找到?添加学校</a>' + 
        '<div class="inline-block hide add-school-div">' + 
            '<input type="text" class="add-school-input"/>' + 
            '<input type="button" class="add-school-ok" value="确定"/>' + 
            '<input type="button" class="add-school-cancel" value="取消"/>' + 
        '</div>' + 
    '</div>');

2.初始化新的元素

var initAddSchool = function(instance){
    // 生成元素
    var $el = $(instance.opts.appendTo).find('.school-box-wrapper');
    $el.append($addSchoolCopy.clone());
    $el.find('.search-school-empty').append('<a href="javascript:void(0)" class="add-school-link">添加学校</a>');

    // 释放变量
    $el = null;
};

3.为新的目标元素绑定事件

// 目标元素
var $addSchoolLink = $el.find('.add-school-link');
var $addSchoolDiv = $el.find('.add-school-div');
var $addSchoolInput = $el.find('.add-school-input');
var $addSchoolOk = $el.find('.add-school-ok');
var $addSchoolCancel = $el.find('.add-school-cancel');

// 事件
$addSchoolLink.click(function(){
    $addSchoolDiv.removeClass('hide');
    $addSchoolInput.focus();
});

$addSchoolCancel.click(function(){
    $addSchoolDiv.addClass('hide');
});

$addSchoolOk.click(function(){
    var schoolName = $.trim($addSchoolInput.val());
    if(schoolName.length == 0){
        return false;
    }

    // TODO: ajax添加
    var newSchoolId = 'undefined';

    // 自定义事件回调
    instance.fire('schoolChosen', {
        schoolName: schoolName,
        schoolId: newSchoolId
    });
    // 自动收起
    instance.hide();
    // 清空输入内容
    $addSchoolInput.val('');
    $addSchoolDiv.addClass('hide');
});

注意$addSchoolOkclick执行里,应该用Ajax向后台发送请求,将用户输入的学校名添加到数据库中去,最后将新加学校的ID返回给页面。而上面的代码直接写死一个undefined的学校ID,这里仅做demo。最后添加成功后,依然要触发自定义schoolChosen事件,好让应用层页面做出响应。

4.应用层使用组件时添加一项初始化参数

var schoolBox = new SchoolBox({
    appendTo: '#schoolBoxWrapper',
    searchSchool: true,
    addSchool: true
});

可以看到扩展组件功能时,对应用层页面代码的影响是很小的。只要不添加自定义事件的类型,应用层几乎不用改代码,因为它只关心选中的学校,并将它更新显示到页面上,而不需要关心这个学校到底是通过什么方式选来的。

学校选择器v7 Demo

我的博客

原文链接:http://fuxiaode.cn/blog/2015/01/27/step-by-step-js-component-schoolbox-6/

合集链接:http://fuxiaode.cn/blog/2015/02/11/step-by-step-js-component-schoolbox-collections/

评论
发表评论
暂无评论
PUBLISHED IN
一步步做组件-学校选择器

这学期来一直在忙项目,整整一个学期都在做,自己的看书计划也没能实施。不过还是有不少收获的,是对以前看过的 JS Patterns 系列的综合运用,所以光看是不够的,一定要能应用到实际的业务中,并根据具体业务相应调整。趁着现在这段时间,想把以前写过的代码重新review一遍,并抽出可复用的功能把它们改写成通用组件,既是自己总结和提升的机会,也把它们作为以后的代码积累。原文博客合集链接:http://fuxiaode.cn/blog/2015/02/11/step-by-step-js-component-schoolbox-collections/

我的收藏