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

Overview

  • 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:

      Aj.init(function($scope){
        $scope.data = {};
        $scope.snippet("body").bind($scope.data, {
            name:[
               Aj.form(), //bind the $scope.data.name to input[name=name] in 2-way
               "#name-preview" //bind the $scope.data.name 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 http://astamuse.github.io/asta4js

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.

development

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.



Asta4js是一个MVVM框架,允许独立的html模板和独立的渲染/绑定逻辑到html模板中的独立js文件。

概述

  • 纯html模板和分离绑定

    有一个简单的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; 
    div>

    然后我们可以使用javascript模型绑定两个DOM元素,如下所示:

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

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

  • web组件支持

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

可以在 http://astamuse.github.io/asta4js 找到很多例子。

使用者指南位于 Asta4js wiki

为什么选择Asta4js

多年来,我们一直在从前端模板文件中实践分离渲染/绑定逻辑,我们认为分离的渲染/绑定是开发人员和设计人员能够完全独立工作的最佳方式。

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

开发

运行所有测试

grunt test

在chrome上运行某些测试

grunt wtestc -file test/e2e/virtual_path_in_array_test.js

dev build

grunt dev

dev观看

grunt watch

状态和路线图

目前,Asta4js仍然处于Alpha开发阶段,这意味着它仍然缺乏一些重要的功能,但由于我们在开发服务中使用它,因此可以将其视为对现有功能的稳定。

Todo东西:

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

感谢任何问题报告或贡献/公关,特别是对于上述待办事项的等待项目。您也可以提出讨论问题。




相关问题推荐