У меня есть список товаров в RadListView, и у каждого товара есть селектор количества.Пользователь может нажимать кнопки + - для увеличения или уменьшения количества или вводить текстовое поле тоже.Все эти элементы управления работают, и данные обновляются в видимой, но не на экране.Значение, отображаемое в текстовом поле, не обновляется на экране.Вот код:
<StackLayout col="1" orientation="horizontal" class="qtySelect bg-secondary">
<Label class="mdi qtyButtons" text="" pid="{{ id }}" tap="qtyDecrease" />
<TextField text="{{ quantity }}" keyboardType="Number" verticalAlignment="top" class="qtyText" />
<Label class="mdi qtyButtons" text="" pid="{{ id }}" tap="qtyIncrease" />
</StackLayout>
JS
function findById(pid){
var index;
products.forEach (function(elem, i) {
if(elem.id == pid){
index = i;
}
});
return index;
}
exports.qtyDecrease = function(args){
var index = findById(args.object.pid);
console.log(index);
var product = products.getItem(index);
if(product.min_order < product.quantity)
product.quantity = parseInt(product.quantity)-1;
else
Toast.makeText("Minimum quantity of "+product.min_order+" is required for this product.").show();
products.set(index, product);
}
exports.qtyIncrease = function(args){
var index = findById(args.object.pid);
console.log(index);
var product = products.getItem(index);
product.quantity = parseInt(product.quantity)+1;
products.set(index, product);
}
Если я прокручиваю элемент вне поля зрения и обратно, я вижу обновленные значения.Я попробовал refresh() метод в списке, но это заставляет список прокручиваться к вершине, что нежелательно.
Так как я могу принудительно обновить только этот элемент?
Редактировать:Полный код
<lv:RadListView row="1" items="{{ products }}" id="productList">
<lv:RadListView.listViewLayout>
<lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2" />
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<GridLayout rows="{{ width+', auto' }}" class="borders">
<fresco:FrescoDrawee row="0" width="{{ width }}" height="{{ width }}" decodeWidth="{{ width }}" decodeHeight="{{ width }}" imageUri="{{ image }}" placeholderImageUri="~/images/loading.jpg" failureImageUri="~/images/loading.jpg" progressiveRenderingEnabled="true" id="{{ 'product'+id }}" tap="selectItem" />
<StackLayout row="1" class="card-content bg-white">
<label text="{{ name }}" class="bold" />
<Label text="{{ 'Net Weight: '+netWeight+' gms' }}" class="h6 text-black" />
<GridLayout columns="auto,auto">
<Label col="0" text="Qty: " class="h6 text-black" />
<StackLayout col="1" orientation="horizontal" class="qtySelect bg-secondary">
<Label class="mdi qtyButtons" text="" pid="{{ id }}" tap="qtyDecrease" />
<TextField text="{{ quantity }}" keyboardType="Number" verticalAlignment="top" class="qtyText" />
<Label class="mdi qtyButtons" text="" pid="{{ id }}" tap="qtyIncrease" />
</StackLayout>
</GridLayout>
<Button text="{{ addToCartText }}" class="btn trans-white" padding="0" pid="{{ id }}" tap="addToCart" />
</StackLayout>
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
JS
const screenWidth = settings.getNumber("screenWidth");
var boxWidth = screenWidth/2;
var page;
var prodSearchCriteria;
var productRadList;
var productsVM;
var products;
var numProductsView;
function loadProducts(criteria){
http.request({
url: config.apiUrl+"products.php",
method: "POST",
headers: { "Content-Type": "application/json" },
content: JSON.stringify({
auth: config.apiAuth,
criteria: criteria
})
}).then(function(request){
var response = JSON.parse(request.content);
productsVM.set("numProducts", response.data.length);
productsVM.set("minWeight", response.min_weight);
productsVM.set("maxWeight", response.max_weight);
productsVM.set("designs", response.designs);
products.length = 0;
for (var i = 0; i < response.data.length; i++) {
products.push({
id: response.data[i].id,
image: config.siteUrl+"/product_img/"+response.data[i].image,
name: response.data[i].name,
netWeight: response.data[i].net_weight,
width: boxWidth,
min_order: response.data[i].min_order,
quantity: response.data[i].min_order,
addToCartText: "Add to Cart"
});
}
productIdsString = productIdsString.slice(0, -1);
numProductsView.resetNativeView();
}, function(error){
console.log(JSON.stringify(error));
});
}
exports.onLoaded = function(args) {
page = args.object;
prodSearchCriteria = page.navigationContext;
if("filters" in prodSearchCriteria){
} else {
prodSearchCriteria.filters = {};
}
productsVM = new observableModule.fromObject({
userAvatar: settings.getString("userAvatar"),
userEmail: settings.getString("userEmail"),
cartNumProducts: settings.getNumber("cartNumProducts"),
cartNetWeight: settings.getNumber("cartNetWeight"),
cartFineWeight: settings.getNumber("cartFineWeight"),
cartLabor: settings.getNumber("cartLabor"),
numProducts: 0,
minWeight: 0,
maxWeight: 0,
designs: []
});
products = new observableArrayModule.ObservableArray();
page.bindingContext = productsVM;
productsVM.set("products", products);
numProductsView = view.getViewById(page, "numProducts")
productRadList = view.getViewById(page, "productList");
loadProducts(prodSearchCriteria);
}