我有输入字段,它们的值是正确的,但没有被渲染
I have input fields where their value is correct, but it is not being rendered
我做了一个 plunker 与我想要完成的确切事情,就在它起作用的地方: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,它只是不断渲染它的初始值。有人用 Riot.js 试过类似的吗?
解决方案是从 riot.js 版本 2.3.* 更新到最新版本,目前是 3.6.
我做了一个 plunker 与我想要完成的确切事情,就在它起作用的地方: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,它只是不断渲染它的初始值。有人用 Riot.js 试过类似的吗?
解决方案是从 riot.js 版本 2.3.* 更新到最新版本,目前是 3.6.