# cube.js

**Repository Path**: llyb120/cube.js

## Basic Information

- **Project Name**: cube.js
- **Description**: cube.js是一个动态模板引擎————或者说是轻量级的mvvm框架，视图会随着数据的变化来自动刷新。cube.js的书写方式和传统的模板引擎没有任何区别，你可以很轻松替换掉原本的引擎，下面让我们来看下如何一分钟上手cube.js
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2017-09-04
- **Last Updated**: 2025-04-02

## Categories & Tags

**Categories**: template-engine

**Tags**: None

## README

# cube.js
cube.js是一个动态模板引擎————或者说是轻量级的mvvm框架，视图会随着数据的变化来自动刷新

相较于传统的MVVM框架写法，它显得更为直观且符合逻辑思维，因为你书写的方式与传统后端模板并无太大的区别

## 一分钟上手cube.js

#### 你需要引入cube.js

```
<script src='../dist/bundle.js'></script>
```

#### 首先，你可能有如下格式的数据
 
```
{
    d : 1,
    abc : [
        {
            ccc : 1,
        },
        {
            ccc : 2
        }
    ]
}
```

#### 使用c-tpl指定对应的数据
```
<div c-tpl='test'>

</div>
```

#### 使用Cube.set将数据设为监听数据，事实上你仍然可以直接使用var，这种情况下，当触发变更时，数据仍然会自动刷新，只是不那么频繁
```
<script>
    var data = {
        d : 1,
        abc : [
            {
                ccc : 1,
            },
            {
                ccc : 2
            }
        ]
    };
    //当不执行下面这句的时候，仍然可以进行渲染
    Cube.set("test",data);
</script>
```

#### 书写对应的模板，你可以使用for/each 和 if/else if/else 这种指令，:value表示你需要双向绑定的数据（暂时不建议使用，还在开发中）
```
<div c-tpl='test'>
    <input type='text' :value='d'> 
    <ul>
     ~ each i,v in abc ~
            ~ each item in v ~
                ~ if Math.random() > 0.5
                    <li>~ item ~ 0.5+</li>
                ~ else if Math.random() > 0.5 ~
                    <li>else if item</LI>
                ~ else ~
                     <li>0.5-</li>
                ~ end ~
            ~ end ~
        ~ end ~
    </ul>
    ~ d ~
</div>
```

#### 你可以使用 ":" + 事件名称来声明事件，例如

```
    <a href='javascript:;' :click="d++">click me</a>
```

#### 更改这些数据，或是点下按钮，查看变化吧！
```
<script>
    data.abc[0].ccc = 2;
    setTimeout(function(){
        data.d = 'oh yes'
    },3000);
</script>
```