Question

我用我正在努力完成的确切事情做了一个关于它的工作：http://embed.plnkr.co/Qjh4FLZY428Vvjc7koXf/。相同版本的riotjs和一切：/

我正在使用Riot.js接管代码库，并且有这个自动完成标签看起来像这样：

    <autocomplete>
<div class="input-group {open : showResults}">
    <div class="input-group-addon">
        <i class="fa {opts.setup.iconclass}"></i>
    </div>
    <input type="text" name={opts.setup.name} class="form-control" onblur={opts.onblur} placeholder={opts.setup.placeholder} value={self.setup.valueSelected} onkeyup={keyup}/>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li each={res in results}><a href="#" onclick={valueSelected}>{res.title}</a></li>
    </ul>
</div>

<script>
var self = this;

self.timer = null;
self.showResults = false;
self.results = [];

var value = "";
self.keyup = function(e) {
    value = e.target.value;
    clearTimeout(self.timer)
    self.timer = setTimeout(self.performSearch, opts.setup.timeout);
}

self.performSearch = function() {
    if(value == "") {
        self.showResults = false;
        self.update();
    } else {
        $.ajax({
            url: opts.setup.url + encodeURIComponent(value),
            success: function(resp) {
                var data = resp;
                if(typeof(data) == "string") {
                    data = JSON.parse(resp);
                }

                if(!Array.isArray(data)) {
                    data = data[Object.keys(data)[0]];

                }

                self.results = data.map(function(obj) {
                    var str = "";

                    self.opts.setup.title.split(',').forEach(function(key) {
                        str += obj[key] + " ";
                    });
                    return {title: str, original: obj};
                });

                if(self.results.length > 0) {
                    self.showResults = true;
                    self.update();
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    }
}


self.valueSelected = function(e) {
    e.preventDefault();
    self.showResults = false;
    self.update();
    opts.setup.callback(e.item.res.original, opts.fieldName);
}
</script>
</autocomplete>

从外面我们只需用：

渲染它

self.addressac = {
    name: "form.Address",
    iconclass: "fa-map",
    placeholder: "Find addresse",
    selectedValue: "",
    timeout: 1000,
    url: "https://someendpoint?q=",
    title: "tekst",
    callback: function(selectedValue) {
        self.addressac.selectedValue = selectedValue.tekst;

        self.order.Address = selectedValue.adresse.vejnavn;
        self.order.Number = selectedValue.adresse.husnr;
        self.order.AddressUUID = selectedValue.adresse.id;
        if(selectedValue.adresse.etage != null) {
            self.order.Floor = selectedValue.adresse.etage;
            if(selectedValue.adresse['dør'] != null) {
            self.order.Floor = self.order.Floor + " " + selectedValue.adresse['dør'];
            }
        }
        self.order.Zip = selectedValue.adresse.postnr;
        RiotControl.trigger('reports-on-address', self.order.AddressUUID);
        RiotControl.trigger('order-associationcvr-from-address', selectedValue.adresse);
        self.update();
    }
};

，组件呈现为：

                    <autocomplete setup={addressac}> </autocomplete>

真正奇怪的是self.update（）有效，因为它将自动完成输入字段值属性设置为从下拉列表中选择的正确新值，但它不会在html中呈现值attribut ，它只是保持渲染其初始值。有人试过和Riot.js相似吗？

Answer 1

解决方案是从riot.js版本2.3。*更新到最新版本，目前为3.6。

我有输入字段，其值正确，但它没有被渲染

1 个答案: