knockin

v1.0.5

Published

5 months ago

A modern MVVM library with a minimal API for TypeScript

0High
0Medium
0Low

jvy

mvvm reactive binding typescript observable

Knockin - 轻量级响应式前端框架

Knockin 是一个受 Knockout.js 启发的轻量级 JavaScript 响应式前端框架，提供了数据绑定、可观察对象和计算属性等功能。

核心特性

1. 可观察对象 (Observable)

obs<T>(initialValue: T): 创建一个可观察对象
obsArray<T>(initialValues: T[]): 创建一个可观察数组，提供完整的数组操作方法

2. 计算属性 (Computed)

comp<T>(computeFn: () => T): 创建一个基于其他可观察对象的计算属性

3. 数据绑定 (Data Binding)

支持以下绑定类型：

text: 文本内容绑定
value: 表单元素值绑定
click: 点击事件绑定
visible: 元素可见性绑定
foreach: 数组遍历绑定
自定义绑定处理器

4. 可观察数组方法

可观察数组提供完整的数组操作API：

push, pop, shift, unshift
remove, clear
find, filter, some
splice, at, getLength

使用示例

HTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Knockin Example</title>
  <script type="module">
    // 导入 Knockin 核心库
    import { obs, obsArray, comp, bind } from '../dist/index.js';

    /**
     * 创建视图模型
     */
    function createViewModel() {
      const firstName = obs('John'); // 可观察对象：名字
      const lastName = obs('Doe'); // 可观察对象：姓氏
      const hobbies = obsArray(['Reading', 'Coding']); // 可观察数组：爱好
      const isVisible = obs(true); // 可观察布尔值：是否可见

      // 计算属性：全名（可以使用 ES5 语法）
      const fullName = comp(() => `${firstName.value || ''} ${lastName.value || ''}`);

      return {
        firstName,
        lastName,
        hobbies,
        isVisible,
        fullName,
        addHobby: () => {
          let hobby = document.getElementById('newHobby').value;
          console.log(hobby);
          // 添加新爱好（使用 ES5 语法）
          hobbies.push(hobby);
        },
        toggleVisibility: () => {
          // 切换可见性（使用 ES5 语法）
          isVisible.value = !isVisible.value;
        }
      };
    }

    // 初始化视图模型
    const viewModel = createViewModel();

    // DOM 加载完成后绑定数据
    document.addEventListener('DOMContentLoaded', () => {
      bind(document.getElementById('app'), viewModel);
    });
  </script>
</head>
<body>
  <!-- 主容器 -->
  <div id="app">
    <!-- 显示全名 -->
    <h1 data-bind="text: fullName"></h1>

    <!-- 输入框：名字 -->
    <div>
      <label for="firstName">First Name:</label>
      <input id="firstName" data-bind="value: firstName" />
    </div>

    <!-- 输入框：姓氏 -->
    <div>
      <label for="lastName">Last Name:</label>
      <input id="lastName" data-bind="value: lastName" />
    </div>

    <!-- 按钮：切换可见性 -->
    <button data-bind="click: toggleVisibility">Toggle Visibility</button>

    <!-- 控制可见性的内容 -->
    <div data-bind="visible: isVisible">
      <p>This content is visible!</p>
    </div>

    <!-- 爱好列表 -->
    <h2>Hobbies</h2>
    <ul data-bind="foreach: hobbies">
      <li data-bind="text: $item"></li>
    </ul>

    <!-- 添加新爱好 -->
    <div>
      <input id="newHobby" placeholder="Enter a new hobby" />
      <button data-bind="click: addHobby">Add Hobby</button>
    </div>
  </div>
</body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Knockin - 轻量级响应式前端框架

核心特性

1. 可观察对象 (Observable)

2. 计算属性 (Computed)

3. 数据绑定 (Data Binding)

4. 可观察数组方法

使用示例

HTML 示例