首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >RadListView -更新文本字段值

RadListView -更新文本字段值
EN

Stack Overflow用户
提问于 2018-08-27 06:50:00
回答 2查看 134关注 0票数 1

我在RadListView中有一个产品列表,每个产品都有一个数量选择器。用户可以按+-按钮来增加或减少数量,也可以键入文本字段。所有这些控件都在工作,数据在可观察的范围内被更新,但不在屏幕上。文本框中显示的THe值不会在屏幕上更新。下面是代码:

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
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()方法,但这使得列表滚动到顶部,这是不可取的。

那么,我如何才能强制刷新这个元素呢?

编辑:完整代码

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
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);
}
EN

回答 2

Stack Overflow用户

发布于 2018-08-27 06:58:46

尝试用10毫秒的setTimeout()封装数量变化

票数 0
EN

Stack Overflow用户

发布于 2018-08-29 04:47:01

您是否再次尝试手动绑定数据(在增加-decrease函数和textfield的更改事件中)?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52033912

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档