注意:我不是指“双向绑定”
我正在使用ractive装饰器(select2)将输入转换为select2。我通过ajax获得的数据是来自数据库的一些记录,例如:
[{id:1, name:"test", quantity:2, image:"image.jpg"},
{id:2, name:"bar", quantity:21, image:"image2.jpg"},
{id:3, name:"foo", quantity:21, image:"image3.jpg"}]
我使用select2的函数formatResult
和formatSelection
我正在使用装饰器的元素是这样的:
<input type="hidden" value="{{values}}" decorator="select2">
用户选择某些内容后,values
将等于所选对象的ID(例如:如果我选择第一个和最后一个记录,则值= 1,3)
我的问题是:我如何获得所选的完整对象?我在考虑<input>
(<input value="{{values}}" data-objects="{{objects}}">
上的两个绑定,所以当用户选择一些东西时,装饰者也可以保存完整的对象。但是当我调试装饰器时,node._ractive.binding
只显示值而不是其他属性。
答案 0 :(得分:0)
我通过在ractive中保存ajax请求的结果来解决它,然后将id与对象id匹配以找到原始对象。
不是最漂亮的东西,但它有效。
Ractive.decorators.select2.type.whatever = {
tags: [],
separator: "|",
ajax: {
url: "ajax_url",
data: function(searchterm, page) {
return {
searchterm: searchterm,
page: page,
};
},
results: function(data, page) {
//Here i save the records
ractive.set("data", data.records);
return {results: data.records, more: data.more};
}
}
};
var ractive = new Ractive({
el: "things",
template: "template",
});
ractive.observe("ids", function(ids) {
var data = ractive.get("data");
ids = ids.split("|");
//I can obtain the original objects
});
&#13;
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script src="https://rawgit.com/Prezent/ractive-decorators-select2/master/ractive-decorators-select2.js"></script>
<!-- select2, jquery missing -->
<script type="ractive-template" id="template">
<input type="hidden" value="{{ids}}" decorator="select:whatever">
</script>
<div id="things"></div>
&#13;