In diesem Artikel wird hauptsächlich die Implementierung einer einfachen Warenkorbfunktion vorgestellt, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.
Avalon ist das leistungsstärkste MVVM-Framework China Kürzlich haben wir in meinem letzten Warenkorbprojekt Avalon verwendet, um einige Module zu implementieren, also haben wir natürlich Avalon verwendet, um den Warenkorb zu implementieren. Als nächstes werde ich Ihnen in diesem Artikel den Beispielcode von Avalonjs zur Implementierung einer einfachen Warenkorbfunktion mitteilen. Freunde, die ihn benötigen, können darauf verweisen
Zuerst gebe ich Ihnen einen Kurze Einführung in das Konzept von Avalon
Avalon ist das leistungsstärkste MVVM-Framework in China. Obwohl das Taobao KISSY-Team auch zwei MVVM-Frameworks entwickelt hat, haben sie alle zu nichts geführt. Es gibt nur wenige andere MVVM-Frameworks. Nur Ausländer und untätige Architekten wie ich haben Zeit, sich mit diesem Thema zu beschäftigen. Ich habe schon vor langer Zeit vorhergesagt, dass MVVM die ultimative Front-End-Lösung ist. Ich habe ein tiefes Verständnis für Shanda Pass, als ich für Shanda Wireless gearbeitet habe. Eine Geschäftslogik entspricht mehr als zehn verschiedenen Schnittstellen, und eine mehrschichtige Architektur ist unerlässlich. Daher dient die bidirektionale Bindung als Gegenmittel in Kombination mit dem seit langem beliebten MVC-Framework, um das Artefakt von MVVM abzuleiten.
Da wir kürzlich an einem Warenkorb gearbeitet haben und Avalon verwenden, um einige Module zu implementieren, verwenden wir natürlich Avalon, um den Warenkorb zu implementieren. Derzeit finden wir, dass Avalon relativ leistungsfähig ist, was viel spart Code. Menge.
Die allgemeinen Funktionen eines Einkaufswagens bestehen darin, Mengen zu addieren und zu subtrahieren, Produkte auszuwählen, Produkte zu löschen und Mengen zu berechnen. Da Avalon über eine bidirektionale Bindungsfunktion verfügt, entfallen Dom-Operationen und es muss nur die Logik vervollständigt werden Dies kann in den folgenden Schritten erreicht werden.
1. HTML-Struktur der Seite
Wir berücksichtigen hier keine guten Effekte, daher verwenden wir direkt das einfachste HTML, um es zu implementieren, hauptsächlich einschließlich Controller und Liste Schleifen. Betragsanzeige, die einfache Codestruktur ist wie folgt:
<body ms-controller="test"> <ul ms-visible="arr.length"> <li><input type="checkbox" ms-click="checkAll" ms-duplex-checked="checkAllbool"/>全选</li> <li ms-repeat="arr" > <input type="checkbox" ms-attr-value="el.id" ms-duplex="selected" /> {{el.text}} <input type="text" name="" ms-attr-value="el.num" ms-on-input="changeNum(el)"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="plus(el)">加</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="minus(el)">减</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="del(el)">删除</a> <p>单价:{{el.price | currency}}</p> <p>金额:{{el.num*el.price | currency}}</p> </li> </ul> <p>总金额:{{total | currency}}</p> </body>
Es gibt mehrere funktionale Ereignisse wie alle Auswahl, Addition, Subtraktion und Löschung. Der Betrag verwendet die Filterwährung.
2. Führen Sie avalon.js ein und definieren Sie das Modell
Es ist notwendig, js einzuführen. Nach der Einführung von avalon.js können Sie
var vm = avalon.define({ $id: "test" });
3. Definieren Sie die Produkte im Warenkorb
Im eigentlichen Projekt muss dies über den Hintergrund erfolgen, zu Demonstrationszwecken wird es direkt hier definiert. Von Anfang an können Sie der HTML-Struktur des Klicks entnehmen, dass die Artikel im Warenkorb hier arr verwenden. Als nächstes müssen Sie also arr definieren, das wie folgt definiert werden kann:arr : [ { id:1, num:1, price:45.5, text:'商品1' }, { id:2, num:1, price:8.8, text:'商品2' }<span style="font-size: 9pt; line-height: 1.5;">]</span>
Einkaufswagen haben im Allgemeinen die Funktion, alle auszuwählen, aber die Ausdrucksform ist anders, dann können Sie es wie folgt definieren checkAllbool
: false,
checkAll
: function()
{
if (this.checked)
{
var _arr
= [];
avalon.each(vm.arr,function(index,item){
_arr[index]
= item.id+'';
});
vm.selected
= _arr;
}
else {
vm.selected=[];
}
}
4. Definieren Sie die Methoden der Addition, Subtraktion und Löschung
Addition und Subtraktion sind hauptsächlich Mengenänderungen, während die Löschung erfordert, dass das Produkt direkt aus arr entfernt wird (zuvor) Löschen Sie plus:
function(el){
el.num++;
vm.cal();
},
minus:
function(el){
if(el.num>1){
el.num--;
vm.cal();
}
},
del:
function(el){
vm.arr.remove(el);
},
changeNum:
function(el){
var _value
= this.value,
_reg
= /^[1-9]\d?$/
;
if(!_reg.test(_value)){
this.value
= 1;
el.num
= 1;
}else{
el.num
= _value;
}
vm.cal();
}
Die Additions- und Subtraktionsmethoden sind sehr einfach. Ändern Sie einfach das Num-Attribut, um zu bestimmen, ob die Eingabe eine Zahl ist.
5. Definieren Sie die Berechnung der Gesamtmenge Die Methode zur Berechnung der Gesamtmenge ist sehr einfach, das heißt, Sie multiplizieren die Menge aller ausgewählten Produkte mit der Stückpreis und addieren Sie sie, aber hier gibt es eine andere Methode, die darin besteht, das entsprechende Produkt über die Produkt-ID zu finden, damit die Menge des Produkts berechnet werden kann. total:0,
cal:
function(){
var _arr
= this.arr,
_selected
= this.selected,
i
= 0,
_obj
= '',
_prcie
= 0
;
if(_selected.length){
for(;i<_selected.length;i++){
_obj
= this.findById(_selected[i])
||{};
if(_obj.price
&& _obj.num){
_prcie
= _prcie + _obj.price * _obj.num;
}
}
}
this.total
= _prcie;
},
findById:
function(id){
if(!id)
return '';
var i=0,
_arr
= this.arr,
_obj
= '',
_id
= parseInt(id,10)
;
for(;i<_arr.length;i++){
if(_arr[i].id
=== _id){
_obj
= _arr[i];
}
}
return _obj;
}
6. Überwachungsattribute
需要监听两个属性,那就是 selected 和 arr,监听 selected是为了随时了解商品有没有全选中,主要通过监听Length。监听arr是判断商品有没有被删除,如果arr的length改变,则表示商品有被删除,需要重新计算总金额。
vm.selected.$watch("length", function(n) { vm.checkAllbool = n === vm.arr.size() vm.cal(); }); vm.arr.$watch("length", function(n) { vm.cal(); });
通过上面的步骤分析,可以了解了大概的实现流程,下面是完整的代码。
购物车 <script> var vm = avalon.define({ $id: "test", arr : [ { id:1, num:1, price:45.5, text:'商品1' }, { id:2, num:1, price:8.8, text:'商品2' } ], selected : ["1"], checkAllbool : false, checkAll : function() { if (this.checked) { var _arr = []; avalon.each(vm.arr,function(index,item){ _arr[index] = item.id+''; }); vm.selected = _arr; } else { vm.selected=[]; } }, plus: function(el){ el.num++; vm.cal(); }, minus: function(el){ if(el.num>1){ el.num--; vm.cal(); } }, del: function(el){ vm.arr.remove(el); }, changeNum: function(el){ var _value = this.value, _reg = /^[1-9]\d?$/ ; if(!_reg.test(_value)){ this.value = 1; el.num = 1; }else{ el.num = _value; } vm.cal(); }, total:0, cal: function(){ var _arr = this.arr, _selected = this.selected, i = 0, _obj = '', _prcie = 0 ; if(_selected.length){ for(;i<_selected.length;i++){ _obj = this.findById(_selected[i]) ||{}; if(_obj.price && _obj.num){ _prcie = _prcie + _obj.price * _obj.num; } } } this.total = _prcie; }, findById: function(id){ if(!id) return ''; var i=0, _arr = this.arr, _obj = '', _id = parseInt(id,10) ; for(;i<_arr.length;i++){ if(_arr[i].id === _id){ _obj = _arr[i]; } } return _obj; } }); vm.selected.$watch("length", function(n) { vm.checkAllbool = n === vm.arr.size() vm.cal(); }); vm.arr.$watch("length", function(n) { vm.cal(); }); vm.cal(); </script> <body ms-controller="test"> <ul ms-visible="arr.length"> <li><input type="checkbox" ms-click="checkAll" ms-duplex-checked="checkAllbool"/>全选</li> <li ms-repeat="arr" > <input type="checkbox" ms-attr-value="el.id" ms-duplex="selected" /> {{el.text}} <input type="text" name="" ms-attr-value="el.num" ms-on-input="changeNum(el)"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="plus(el)">加</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="minus(el)">减</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ms-click="del(el)">删除</a> <p>单价:{{el.price | currency}}</p> <p>金额:{{el.num*el.price | currency}}</p> </li> </ul> <p>总金额:{{total | currency}}</p> </body>
用avalon时间还不久,一步步来,希望能更深入了解mvvm框架,在后面的日子里应用更多的场景。
Das obige ist der detaillierte Inhalt vonAvalonjs implementiert eine einfache Warenkorbfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!