Question

我在RadListView中有一个产品列表，每个产品都有一个数量选择器。用户可以按+-按钮增加或减少数量，也可以在文本框中键入内容。所有这些控件都在工作，并且正在可观察的位置（而不是在屏幕上）更新数据。在文本字段中显示的值不会在屏幕上更新。这是代码：

<StackLayout col="1" orientation="horizontal" class="qtySelect bg-secondary">
    <Label class="mdi qtyButtons" text="&#xe15c;" pid="{{ id }}" tap="qtyDecrease" />
    <TextField text="{{ quantity }}" keyboardType="Number" verticalAlignment="top" class="qtyText" />
    <Label class="mdi qtyButtons" text="&#xe147;" 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="&#xe15c;" pid="{{ id }}" tap="qtyDecrease" />
            <TextField text="{{ quantity }}" keyboardType="Number" verticalAlignment="top" class="qtyText" />
            <Label class="mdi qtyButtons" text="&#xe147;" 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);
}

Answer 1

尝试以10毫秒的setTimeout()包装数量变化

Answer 2

您尝试手动重新绑定数据（在增加-减少功能以及在文本字段的更改事件中）。我在NS的github问题上看到了类似的问题，因为我在iOS中使用listview自动刷新遇到了一些问题。您也可以共享xml吗？

RadListView-更新文本字段值

2 个答案: