我为EPiServer开发了一个dijit小部件。在小部件中有一个FilteringSElect,它从REST存储中获取数据。填充FilteringSelect的值是数字Id和文本值。
当EPiServer保存该值时,它是保存的数值(Id)。
我的整个小部件看起来像这样:
{
return declare("communityuser.editors.CommunityUserSelector", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {
templateString: "<div class=\"dijitInline\">\
<div data-dojo-attach-point=\"stateNode, tooltipNode\">\
<div data-dojo-attach-point=\"inputWidget\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"width: 300px\"></div><span style=\"padding-left:10px;\"><a href=\"#\" data-dojo-attach-point=\"resetLink\">Reset</a></span>\
</div>\
</div>",
intermediateChanges: false,
value: null,
store: null,
onChange: function (value) {
// Event
},
postCreate: function () {
// call base implementation
this.inherited(arguments);
// Init textarea and bind event
this.inputWidget.set("intermediateChanges", this.intermediateChanges);
//set whether the internal required property is true
this.inputWidget.set('required', false);
//get a reference to the CommunityUserStore
var registry = dependency.resolve("epi.storeregistry");
this.store = this.store || registry.get("customquery");
//set the store for the FilteringSelect
this.inputWidget.set("store", this.store);
//connect the onChange event for the FilteringSelect
this.connect(this.inputWidget, "onChange", this._onInputWidgetChanged);
//connect the onclick event for the Reset Link
this.connect(this.resetLink, "onclick", this._onResetClicked);
},
isValid: function () {
// summary:
// Check if widget's value is valid.
// tags:
// protected, override
return true;
},
// Setter for value property
_setValueAttr: function (value) {
if (!value) {
return;
}
//set the value of the FilteringSelect and the value of the parent control
this.inputWidget.set("value", value.userId);
this._set("value", this._serializeUser(value));
},
// Event handler for the changed event of the input widget
_onInputWidgetChanged: function (value) {
this._updateValue(value);
},
//Event handler when the Selection in the FilteringSelect is changed
_updateValue: function (value) {
//check whether the initial value matches the new value i.e. the value after the selection has changed
if (this._started && epi.areEqual(this.value, this._serializeUser(value))) {
return;
}
//create an object representation of the value
var formattedValue = (!value) ? {} : this._serializeUser(value);
this._set("value", formattedValue);
this.onChange(formattedValue);
},
_onResetClicked: function (event) {
event.preventDefault();
this.inputWidget.reset();
},
_serializeUser: function(userId) {
return ({userId: userId });
},
});
这可能不是编写dojo / dijit小部件的正确方法 - 这是我的第一个。
在我的Rest商店中,我有两个方法,Get(字符串名称)和GetUserById(int userId)。
返回Get方法的值,我猜是因为Get是dojo正在寻找的默认方法。因此,在加载后,当用户在FilteringSelect中键入值或从FilteringSelect中选择下拉时,将使用Get方法返回的所有值进行填充。
但是,如果小部件加载它已经有一个值(因为它保存在EPiServer中)我想从我的商店调用一个不同的方法并返回1条记录 - 在这种情况下,要返回的记录将是具有相同ID的用户帐户。
Id |值 1 | “用户1” 2 | “用户2” 3 | “用户3”
我正在努力的是如何从商店调用该方法,然后显示FilteringSelect中返回的值。
这是我第一次使用dojo或dijit,所以我可能会做出根本错误的事情。
有人可以给我一个指针吗?
非常感谢 人
答案 0 :(得分:3)
对于FilteringSelect,您可以设置三个属性:“searchAttr”,“labelAttr”和“value”。您可以将“searchAttr”设置为数据中可以进行过滤搜索的属性名称,将“labelAttr”设置为将在UI中显示的数据的属性名称,并将“value”设置为当前所选的id。像
var selector = new FilteringSelect({
searchAttr:"label", //label is property name in your data
labelAttr:"label",
required:false,
value:"selectedId",
store: dojo.store.Observable(new dojo.store.Memory({
idProperty:"name", //if your store key property is not "id", instead of it is "name", you can set like this
data: []
}))
}, dojo.create("span", null, yourDiv)
);
您可以使用
selector.get('value);
selector.set('value', yourValue);
不建议直接在代码中使用_setValueAttr和_set。
希望得到这个帮助。