計(jì)算屬性允許將函數(shù)聲明為屬性。Ember.js在需要時(shí)自動(dòng)調(diào)用計(jì)算的屬性,并在一個(gè)變量中組合一個(gè)或多個(gè)屬性。
App.Car = Ember.Object.extend({ CarName: null, CarModel: null, fullDetails: function() { return this.get('CarName') + ' ' + this.get('CarModel'); }.property('CarName', 'CarModel') });
在上述代碼中, fullDetails 是調(diào)用 property()方法來(lái)呈現(xiàn)兩個(gè)值(即CarName和CarModel)的計(jì)算屬性。每當(dāng) fullDetails 被調(diào)用時(shí),它返回 CarName 和 CarModel 。
<!DOCTYPE html> <html> <head> <title>Emberjs Computed Properties</title> <!-- CDN's--> <script src="/attachements/w3c/handlebars.min.js"></script> <script src="/attachements/w3c/jquery-2.1.3.min.js"></script> <script src="/attachements/w3c/ember.min.js"></script> <script src="/attachements/w3c/ember-template-compiler.js"></script> <script src="/attachements/w3c/ember.debug.js"></script> <script src="/attachements/w3c/ember-data.js"></script> </head> <body> <script type="text/javascript"> App = Ember.Application.create(); App.Car = Ember.Object.extend({ //the values for below Variables to be supplied by `create` method CarName: null, CarModel: null, fullDetails: function(){ //returns values to the computed property function fullDetails return ' Car Name: '+this.get('CarName') + ' Car Model: ' + this.get('CarModel'); //property() method combines the variables of the Car }.property('CarName', 'CarModel') }); var car_obj = App.Car.create({ //initializing the values of Car variables CarName: "Alto", CarModel: "800", }); //Displaying the Car information document.write("Details of the car: <br>"); document.write(car_obj.get('fullDetails')); </script> </body> </html>
讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:
將上述代碼保存在 computed_prop.html 文件中。
在瀏覽器中打開此HTML文件。
下表列出了計(jì)算屬性的屬性:
序號(hào) | 屬性及描述 |
---|---|
1 | 替代調(diào)用 它將一個(gè)或多個(gè)值傳遞給計(jì)算的屬性,而不使用property()方法。 |
2 | 鏈接計(jì)算屬性 鏈接計(jì)算的屬性用于與一個(gè)或多個(gè)預(yù)定義的計(jì)算屬性進(jìn)行聚合。 |
3 | 動(dòng)態(tài)更新 調(diào)用計(jì)算屬性時(shí)動(dòng)態(tài)更新。 |
4 | 設(shè)置計(jì)算屬性 使用 setter和getter 設(shè)置計(jì)算的屬性。 |
更多建議: