[英]I have input fields where their value is correct, but it is not being rendered
I made a plunker with the exact thing i am trying to accomplish, just where it works: http://embed.plnkr.co/Qjh4FLZY428Vvjc7koXf/ . 在工作的地方,我用了我想完成的确切工作: http ://embed.plnkr.co/Qjh4FLZY428Vvjc7koXf/。 Same version of riotjs and everything :/
相同版本的riotjs和所有东西:/
I am taking over a code base using Riot.js, and there is this auto-complete tag looking like this: 我正在使用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>
From the outside we simply render it with: 从外部,我们只需使用以下命令进行渲染:
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();
}
};
and the component are being rendered as: 并且该组件被呈现为:
<autocomplete setup={addressac}> </autocomplete>
What is really weird is that the self.update() works, because it sets the autocomplete input fields value attribute to the correct new value selected from the dropdown, but it doesn't render the value attribut in the html, it just keeps rendering its initial value. 真正奇怪的是self.update()起作用了,因为它将自动完成输入字段的value属性设置为从下拉列表中选择的正确新值,但是它没有在html中呈现值属性,而是一直呈现它的初始值。 Have anyone tried similar with Riot.js?
有人尝试过Riot.js吗?
解决方案是将riot.js版本2.3。*更新到最新版本,即3.6。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.