# layui-ko

**Repository Path**: apebyte/layui-ko

## Basic Information

- **Project Name**: layui-ko
- **Description**:   Layui-ko 是一个基于knockoutjs(简称 ko)的绑定库
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-06-23
- **Last Updated**: 2024-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Layui-Ko
> 此库目前为预览版本，功能有待完善以及测试，使用需谨慎

## 介绍
  Layui-ko 是一个基于[knockoutjs](https://knockoutjs.com/)(简称 **ko**)的绑定库，可以让开发者只专注于Layui组件的Value进行业务操作，其优势在单页表单场景下尤其体现。

  对比vue的大型MVVM框架，ko的优势在于轻量便捷，可以快速无依赖引入任何页面，且使用layui-ko 可以依旧保持原生Layui的操作体验，如果你的项目存在如下情况，可以考虑使用 layi-ko

1. 公司不使用Vue，依旧采用MVC的模式
2. 感觉使用Layui赋值取值有些零散繁琐，希望简单了事
3. 项目已经采用了[knockoutjs](https://knockoutjs.com/)的绑定库

## 使用文档
略(尚未来得及写，且库暂时未经深度测试，现阶段引入项目有风险，请期待)

## Demo演练体验

### ko快速入门(前置提要)
  ko 使用函数式方式对模型字段进行取值赋值(类似Jquery)，例如:
``` js
//绑定示例
var vmodel = {
    //单值字段
    filed:ko.observable('张三'),
    //数组
    arr:ko.observableArray([1, 2]),
    //嵌套:
    sliderRange: [ko.observable(10), ko.observable(40)]
}

//取值
var value1 = vmodel.filed(); // '张三'
var value2 = vmodle.arr(); // [1,2]
var value3_begin = vmodel.sliderRange[0](); //10
var value3_end = vmodel.sliderRange[1](); //40

//赋值
vmodel.filed('newValue');
/*
    ko可观察数组支持js原生数组的所有方法
    例如如果要添加元素应该是:
    vmodel.arr.push(2);
    而不是:
    vmodel.arr().push(2); //ko 无法观察到变化        
*/
//数组覆盖赋值，需要注意的是如果覆盖赋值的value是同一个引用对象是无法观测到的
vmodel.arr([1]);

vmodle.sliderRange[0](20);
```

现在克隆项目打开index.html，或者打开右侧的 GiteePages 进行预览，然后按下F12在控制台进行操作:
``` js
//完整页面模型如下
var vmode = {
                username: ko.observable('用户名'), //用户名
                phone: ko.observable('15672400682'), //手机号
                vercode: ko.observable(''),//验证码
                email: ko.observable('1083092844@qq.com'), //邮箱
                password: ko.observable('123456'),//密码
                price_min: ko.observable(0),   //范围-start
                price_max: ko.observable(100), //范围-end
                interest: ko.observable(3),  //单行选择框
                quiz: ko.observable('你最喜欢的老师'), //分组选择框
                modules: ko.observable(10), //搜索选择框
                date: { //日期
                    value: ko.observable('2019-10-10 23:59:59'),
                    config: window.configs.dateConfig
                },
                date_begin: ko.observable('2019-10-30'), //日期范围-start
                date_end: ko.observable('2023-02-14'), //日期范围-end
                arr: ko.observableArray(['0', '1']), //复选框(复合绑定)
                //tagarr: ko.observableArray(['0', '1']), //标签框
                singleSwitch: ko.observable(false), //开关
                singleCheckbox: ko.observable(true), //复选框
                sex: ko.observable('女'), //单选框
                area: ko.observable('默认值'), //文本域
                slider: ko.observable(10), //滑块
                sliderRange: [ko.observable(10), ko.observable(40)], //滑块(范围)
                rate: ko.observable(2.5), //评分
                rateDisable: ko.observable(false), //评分(禁用控制)
                transfer: ko.observableArray([1, 4]), //穿梭框(只读)
                progeress: ko.observable(50), //进度条(只写)
                xSelValue: ko.observableArray([1, 2]), //xmSelect
                tableData: ko.observableArray([]), //表格
            }
```


### 小试牛刀
``` js
//F12 在控制台试试?

vmode.phone(10086); //手机号
vmode.email('xxx@qq.com'); //邮箱
vmode.date.value('2023-10-01 00:00:00'); //验证日期
vmode.interest(0);//单行选择框

//复选框
vmode.arr.push('3');
vmode.arr.remove('1');
vmode.xSelValue.push(3);//xmSelect（三方独立组件）


//table table的绑定经过特殊处理，数据传入后会全部覆写为get,set的模式来达到监听的效果

vmode.tableData()[0].username="李白不白"; //修改第一行的userName：
vmode.tableData.splice(0,1); //删除第一行

vmode.tableData.unshift({ 
    id:10026,
    username:"一只小白猿",
    email:"1083092844@qq.com",
    sex:'男',
    city:'湖北武汉',
    sign:'兜里没钱',
    experience:99, 
    checkin:99,
    ip:'192.168.2.51',
    joinTime:'2023-08-14' 
});

```

## 致谢
+ 🍗感谢炒鸡好用的下拉组件 [xm-select](https://maplemei.gitee.io/xm-select/#/component/install)


## <br/>菊花 🏵