项目中学习---通过例子学习avalon

本文主要是介绍项目中学习---通过例子学习avalon，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

avalon是前端MVVM框架，将所有前端代码彻底分成两部分，视图的处理通过绑定实现，业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。当然我们是在简单的Js方法中操作这个vm，给vm赋值的！

作用域绑定

ms-controller：

<div ms-controller="AAA"></div>:对应avalon.define({$id=AAA});要加上avalon.scan();才能显示.

{{？？}}：插值表达式，可以显示avalon的内容

对象循环：ms-repeat,ms-with

下面写一个例子，来看看avalon的神奇之处：

页面显示：

<div class="main-content-box" ms-controller="commentOrderController"><div class="pr-box mt10"><div class="row"><div class="col-xs-8"><h4>{{merchantName}}</h4><p>综合评分  <b class="red">{{allScore}}分</b></p><p>共 <b class="red">{{allPeople}}</b> 人评价</p></div><div class="col-xs-4 f16"><p>商品评价									<span class="orange"><i class="mr5" ms-repeat="goodsScoreList" ms-class-1="icon-star:el == 'full'" ms-class-2="icon-star-half-full:el == 'half'" ms-class-3="icon-star-empty:el == 'empty'"></i></span>{{goodsScore}}分</p></div></div><div class="row mt20"><div class="col-xs-4"><div class="well well-sm"><table class="table table-nobordered" style="margin:0;"><tr><td>商品评价</td><td  width="130">共{{goodsPeople}}人</td></tr><tr><td><span class="left mr10 lh15">5分</span><div class="progress progress-sm" style="margin:0"><div class="progress-bar progress-bar-warning" ms-css-width="{{fiveGoodsPercent}}"> </div></div></td><td><span class="red">{{fiveGoodsPercent}}</span>({{fiveGoodsPeople}}人)</td></tr><tr><td><span class="left mr10 lh15">4分</span><div class="progress progress-sm" style="margin:0"><div class="progress-bar progress-bar-warning" ms-css-width="{{fourGoodsPercent}}"></div></div></td><td><span class="red">{{fourGoodsPercent}}</span>({{fourGoodsPeople}}人)</td></tr><tr><td><span class="left mr10 lh15">3分</span><div class="progress progress-sm" style="margin:0"><div class="progress-bar progress-bar-warning" ms-css-width="{{threeGoodsPercent}}"></div></div></td><td><span class="red">{{threeGoodsPercent}}</span>({{threeGoodsPeople}}人)</td></tr><tr><td><span class="left mr10 lh15">2分</span><div class="progress progress-sm" style="margin:0"><div class="progress-bar progress-bar-warning" ms-css-width="{{twoGoodsPercent}}"></div></div></td><td><span class="red">{{twoGoodsPercent}}</span>({{twoGoodsPeople}}人)</td></tr><tr><td><span class="left mr10 lh15">1分</span><div class="progress progress-sm" style="margin:0"><div class="progress-bar progress-bar-warning" ms-css-width="{{oneGoodsPercent}}"></div></div></td><td><span class="red">{{oneGoodsPercent}}</span>({{oneGoodsPeople}}人)</td></tr></table></div></div>	</div></div>
</div>

页面用到了 ms-repeat(循环),ms-class，avalon表格的实现等。

对应的Js将页面和controller进行绑定：

1、首先是对表格的绑定：

 function showList(data) {//debugger;if(data==null || typeof(data)=="undefined"){data={merchantId:commentOrderController.merchantId};}gridAVM.showLoading();$.ajax({type: "post",dataType: "json",data:data,url: contextPath+"/comment/findCommentOrder.html",success: function(dataResult) {if(dataResult.success){gridAVM.render(dataResult.data.items);gridAVM.hideLoading();}else {gridAVM.noResult = '查出数据为无！';gridAVM.hideLoading();}//console.log(dataResult)},error: function(XMLHttpRequest, textStatus, errorThrown) {gridAVM.noResult = '服务器获取数据出现问题，请联系管理员。';gridAVM.hideLoading();}});}
定义vm：
$ctrl.$onRendered = function(params) {commentOrderController = avalon.define("commentOrderController", function(vm) {//下面是定义页面需要显示的变量，（也就是页面中input或者lable框{{}}中放的值）他们都必须定义在vm下，方面赋值和管理vm.merchantId=params.params.merchantId;//承接上一个页面传过来的参数vm.orderCreateTime1 = "";vm.orderCreateTime2="";vm.orderId="";vm.orderType="";vm.customerName="";//给商户具体信息赋值vm.merchantName="";vm.allScore="";//综合评分vm.allPeople="";//总评价人数vm.goodsScore="";//商品评价分数vm.goodsPeople="";//商品评价人数//对星星的控制vm.goodsScoreList=[];		//定义页面循环赋值的List}

不知道大家注意没有，avalon表格的绑定，在一定程度上和easyui很像的，都是在js中操作，当然easyui可能更灵活一点，它也可以在页面上定义表头，但是avalon我却没有直接在页面写表头这么用过。上面的分页，如果不需要，可以直接删掉！不影响使用。

2、然后是如果页面表格不是那种avlon固定的格式，那么就得用ms-repeat属性，将ajax提交以后得到的list循环放进去：

function findCommentMerchByMerchantId(){$.ajax({type: "post",dataType: "json",data:{merchantId:commentOrderController.merchantId},url: contextPath+"/comment/findCommentMerchByMerchantId.html",success: function(dataResult) {commentOrderController.goodsScoreList=[];     if(dataResult.success){var items =dataResult.data;commentOrderController.merchantName=items.merchantName;commentOrderController.allScore=items.allScore;commentOrderController.allPeople=items.allPeople;commentOrderController.goodsScore=items.goodsScore;commentOrderController.goodsPeople=items.goodsPeople;commentOrderController.goodsScoreList.pushArray(calScore(items.goodsScore));}}});}

这样，就完成了页面的显示如下：