Asta4js is a MVVM framework which allows independent html template and separate rendering/binding logic to independent js file from html template.


  • pure html template and separated binding

    There is a simple html template which contains a text input and a preview text label.

    <div>2w bingind<input name="name"></div>
    <div>1w binging:<span id="name-preview"></span></div>

    Then we can bind the two DOM elements with the javascript model as following:

        $ = {};
        $scope.snippet("body").bind($, {
               Aj.form(), //bind the $ to input[name=name] in 2-way
               "#name-preview" //bind the $ to #name-preview in 1-way

    A complete sample of todoApp shows how we can make things amazing.

  • web component support

    Asta4js supports web component as well, thus we can develope our application on component base as the same as what react or polymer does.

    Even that Asta4js can make use of polymer's components by treating them as standard web component. The mozilla brick can be integrated as well. The details can be found at our wiki page Web Component Developing

Plenty examples can be found at

User guide is at Asta4js wiki

Why Asta4js

We have been practicing separating rendering/binding logic from the front-end template files for years, and we believe that separated rendering/binding is the best way to release the productivity of developers and designers both since they can completely work independently.

We had created a server side framework Asta4D to achieve our goal years ago,nowadays we believe it is the time to create one for client side programming, thus we created Asta4js.


run all test

grunt test

run certain test on chrome

grunt wtestc -file test/e2e/virtual_path_in_array_test.js

dev build

grunt dev

dev watch

grunt watch

status and road map

Currently, Asta4js is still in alpha developing, which means it still lacks of some important functionalities, but it can be considered as stable for existing functions because we are using it in our service developing.

Todo things:

  • build
    • it seems that karma is not a good option for common unit test purpose.(waiting)
    • CI support(better with sauce)(waiting)
    • source format and jshint(waiting)
  • core
    • remove dependency of JQuery, use document.querySelector instead(waiting)
    • add test for multiple select(waiting)
    • add support for option group of select(waiting)
    • performance enhancement, especially for array binding which current implementation is inefficient(waiting)
    • api enhancement for better development friendliness.(in progress)
  • example
    • reimplement the todoApp example to follow the todoMVC's guide line and submit it to todoMVC.(waiting)
  • spa
    • to confirm what else we need for a single page application?(being considered)

Any issue report or contribution/PR is appreciated, especially for the waiting items in above todo things. You can also open issues for discussion.



  • 纯html模板和分离绑定


    &lt;  div &gt; 2w bingind&lt; 输入 名称 =   =pl-pds> &gt;&lt; /  div &gt;
    &lt;  div &gt; 1w binging:&lt;  span   id  名称预览 span>&gt;&lt; /  span &gt;&lt; /  div &gt; 


      Aj  init  class =pl-k> function ( $ scope ){
         $ scope  data   =  {}
         $ scope 片段   bind  pl-smi> $ scope 。 data ,{
            名称 [
                Aj  form (),  // 绑定$以2路输入[name = name]
                #name-preview   class =pl-c>  // 将$以单向方式绑定到#名称预览

    todoApp 的完整示例显示了我们如何使事情变得惊人。

  • web组件支持

    Asta4js还支持 Web组件,因此我们可以将组件基础上的应用程序与反应或聚合物相同。 p> 即使这样的Asta4js可以通过将它们作为标准网络组件来处理聚合物的组分。也可以集成 mozilla brick 。详细信息可以在我们的wiki页面找到 Web组件开发

可以在 找到很多例子。

使用者指南位于 Asta4js wiki



我们已经在几年前创建了一个服务器端框架 Asta4D 来实现我们的目标,现在我们认为现在是创建一个对于客户端编程,因此我们创建了Asta4js。



grunt test


grunt wtestc -file test/e2e/virtual_path_in_array_test.js

dev build

grunt dev


grunt watch




  • 构建
    • 似乎因果报应不是普通单位测试目的的好选择(等待)
    • CI支持(更好用酱汁)(等待)
    • 源码格式和jshint(等待)
  • 核心
    • 删除JQuery的依赖关系,使用document.querySelector(等待)
    • 为多个选择(等待)添加测试
    • 添加对select(等待)
    • 的选项组的支持
    • 性能增强,特别是对于当前实现效率低下(等待)
    • 的数组绑定
    • api增强更好的发展友好(正在进行中)
    • 重新执行todoApp示例以遵循 todoMVC指南行,并将其提交到todoMVC。(等待)
    • ,以确认单页应用程序需要什么(被考虑)