dojo - 使用保存的值设置 dijit FilteringSelect 的值

Question

我为 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 Store 中，我有两种方法，Get(string name) 和 GetUserById(int userId)。

返回 Get 方法的值，我推测是因为 Get 是 dojo 正在寻找的默认方法。因此，当用户在 FilteringSelect 中键入一个值或从 FilteringSelect 中选择下拉列表时，加载后，它会填充从 Get 方法返回的所有值。

但是，如果小部件加载时它已经有一个值(因为它保存在 EPiServer 中)我想从我的商店调用不同的方法并只返回 1 条记录 - 在这种情况下，要返回的记录将是一个用户帐户具有相同的 ID。

身份证 |值(value)
1 | “用户 1”
2 | “用户2”
3 | “用户3”

我正在苦苦挣扎的是如何从商店调用该方法，然后在 FilteringSelect 中显示返回的值。

这是我第一次使用 dojo 或 dijit，所以我可能在做一些根本错误的事情。

任何人都可以给我一个指针吗？

非常感谢
铝

Answer 1

对于 FilteringSelect，您可以设置三个属性:“searchAttr”、“labelAttr”和“value”。您可以将“searchAttr”设置为可以进行过滤搜索的数据中的属性名称，将“labelAttr”设置为将显示在 UI 中的数据的属性名称，并将“值”设置为您当前选择的 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 不建议直接在你的代码中使用。

希望这个帮助。