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

forked from Bin/cube.js

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。

克隆/下载

修正：双向绑定的bug以及事件处理器的bug da1cc43

package-lock.json

webpack.config.js

Loading...

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>
```

cube.js是一个动态模板引擎————或者说是轻量级的mvvm框架，视图会随着数据的变化来自动刷新。cube.js的书写方式和传统的模板引擎没有任何区别，你可以很轻松替换掉原本的引擎，下面让我们来看下如何一分钟上手cube.js

JavaScript

取消

暂无发行版

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/arts1986/cube.js.git

[email protected]:arts1986/cube.js.git

arts1986

cube.js

cube.js

master