Computed Observables
Computed Observablesها به واقع خواصی هستندکه از ترکیب چند خاصیت دیگر به دست میآیند یا برای به دست آوردن مقادیر آنها باید یک سری محاسبات را انجام داد. برای مثال به ViewModel زیر دقت کنید:
var personViewModel = { firstName: ko.observable("Masoud"), lastName: ko.observable("Pakdel") this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); };
<span data-bind='text: fullName'></span>
function Product(name, price) { this.name = ko.observable(name); this.price = ko.observable(price); }
this.shoppingCart = ko.observableArray([ new Product("Beer", 10.99), new Product("Brats", 7.99), new Product("Buns", 1.49) ]);
<table> <thead><tr> <th>Product</th> <th>Price</th> </tr></thead> <tbody data-bind='foreach: shoppingCart'> <tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> </tr> </tbody> </table>
حال نیاز به یک button داریم تا با کلیک با بر روی آن یک product جدید به لیست اضافه خواهد شد.
<button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() { this.shoppingCart.push(new Product("More Beer", 10.99)); };
تا اینجا کدهای ViewModel به صورت زیر خواهد بود:
function PersonViewModel() { this.firstName = ko.observable("John"); this.lastName = ko.observable("Smith"); this.checkout = function () { alert("Trying to checkout"); }; this.fullName = ko.computed(function(){ return this.firstName() + " " + this.lastName(); }, this); this.shoppingCart = ko.observableArray([ new Product("Beer", 10.99), new Product("Brats", 7.99), new Product("Buns", 1.49) ]); this.addProduct = function () { this.shoppingCart.push(new Product("More beer", 10.99)); }; };
در این مرحله قصد داریم که یک button نیز برای حذف آیتم از لیست ایجاد کنیم. در ابتدا یک تایع جدید به نام removeProduct به صورت زیر ایجاد خواهیم کرد:
this.removeProduct = function(product) { self.shoppingCart.remove(product); };
function PersonViewModel() { var self = this;
<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>
دستور remove در لیست باعث حذف کامل آیتم از لیست خواهد شد و در خیلی موارد این مورد برای ما خوشایند نیست زیرا حذف یک آیتم از لیست باید در سمت سرور نیز انجام شود نه صرفا در سمت کلاینت، در نتیجه میتوانیم از دستور destroy استفاده کنیم. استفاده از این دستور باعث خواهد شد که عنصر مورد نظر در لیست نمایش داده نشود ولی به صورت واقعی از لیست حذف نشده است(این کار را با تغییر در مقدار خاصیت destroy_ هر عنصر انجام میدهد)
ادامه دارد...
دریافت سورس مثال