0

我使用 dojox.mvc.at 将 dojox.mobile.Switch 的 value 属性绑定到模型中的属性。当我更改模型中的属性时，Switch 会响应更改；但是当我改变开关的状态时，模型中的属性没有得到更新。

dojox.mobile.DatePicker 的问题也是如此。

我正在使用道场 1.9.0

任何人都可以帮助解决这个问题吗？

<div class="row">
    <label for="switch"></label>
    <div id="switch" data-dojo-type="dojox.mobile.Switch" data-dojo-props="leftLabel: 'ON',rightLabel: 'OFF', value: at(appContent,'switch')" onStateChanged="alert(this.value)"></div>
</div>

我的 mdoel 对象是

require(["dojox/mvc/getStateful",
         "dojox/mobile/TextBox",
         "dojox/mobile/ValuePickerDatePicker",
         "dojox/mobile/DatePicker",
         "dojox/mobile/Opener",
         "dojox/mobile/TabBarButton",
         "dojox/mobile/RadioButton",
         "dojox/mobile/TextArea",
         "dojox/mobile/Slider",
         "dojox/mvc/Output",
         "dojox/mobile/Switch"],
        function(getStateful){
            var data={
                    'switch':'on'
            };
            appContent=getStateful(data);
});
4

2 回答 2

0

我尝试了您为 dojox.mobile.Switch 提到的更改，但它不起作用。它仍然是一种绑定方式（从模型到视图）而不是视图到模型。我浏览了 Switch.js 文件，发现“value”属性的更新方式不是 mvc 触发的方式。我在 dojox/mobile/Switch.js 中手动添加了三行代码，在 _onClick 函数中添加了两行代码，在 _changeState 中添加了一行代码，并且开关在 mvc 和没有 mvc 的情况下都可以正常工作。这些更改有效吗？

_changeState: function(/*String*/state, /*Boolean*/anim){

this._set("值", state); */ 我添加的 */

        var on = (state === "on");
        this.left.style.display = "";
        this.right.style.display = "";
        this.inner.style.left = "";
        if(anim){
            domClass.add(this.switchNode, "mblSwitchAnimation");
        }
        domClass.remove(this.switchNode, on ? "mblSwitchOff" : "mblSwitchOn");
        domClass.add(this.switchNode, on ? "mblSwitchOn" : "mblSwitchOff");
        domAttr.set(this.switchNode, "aria-checked", on ? "true" : "false"); //a11y

        var _this = this;
        _this.defer(function(){
            _this.left.style.display = on ? "" : "none";
            _this.right.style.display = !on ? "" : "none";
            domClass.remove(_this.switchNode, "mblSwitchAnimation");
        }, anim ? 300 : 0);
    }


_onClick: function(e){
        // summary:
        //      Internal handler for click events.
        // tags:
        //      private
        if(e && e.type === "keydown" && e.keyCode !== 13){ return; }
        if(this.onClick(e) === false){ return; } // user's click action
        if(this._moved){ return; }
     // this.value= this.input.value= (this.value == "on") ? "off" : "on";  removed by me
        this.input.value = (this.value == "on") ? "off" : "on"; //added by me
        this._set('value', this.input.value);                   //added by me
        console.log("clicked and this.value "+this.value);
        this._changeState(this.value, true);
        this.onStateChanged(this.value);
    }

我检查了两次，正常行为没有问题，并且在 mvc 上也可以正常工作。如果这些更改有效，请在下一版本中进行这些更改以支持 mvc。

于 2013-11-14T12:11:24.603 回答
0

这些小部件有单独的问题。dojox /mobile/Switch类与dojo/_base/declare组合的方式不适用于 dojox /mvc如何扩展dijit/_WidgetBase，它是大多数小部件的基类。您需要将扩展​​显式应用于dojox/mobile/Switch以解决该问题，例如：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 0"></script>
        <script type="text/javascript">
            require([
                "dojox/mvc/atBindingExtension",
                "dojox/mobile/Switch"
            ], function(atBindingExtension, Switch){
                atBindingExtension(Switch.prototype);
                require([
                    "dojo/Stateful",
                    "dojox/mvc/at",
                    "dojox/mobile/parser",
                    "dojox/mvc/Output"
                ], function(Stateful, at, parser){
                    window.at = at;
                    window.model = new Stateful({
                        state: "off"
                    });
                    parser.parse();
                });
            });
        </script>
    </head>
    <body>
        <div data-dojo-type="dojox/mobile/Switch" data-dojo-props="value: at(model, 'state')"></div>
        <div>Switch state: <span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'state')"></span></div>
    </body>
</html>

dojox/mobile/DatePicker不会将用户的输入发送回value属性。您需要value手动查看每个插槽的更改和更新属性以解决此问题：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base', 'DatePicker']"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 0"></script>
        <script type="text/javascript">
            require([
                "dojo/_base/array",
                "dojo/aspect",
                "dojo/date/locale",
                "dojo/date/stamp",
                "dojo/Stateful",
                "dojox/mvc/at",
                "dojox/mobile/parser",
                "dojox/mobile/DatePicker",
                "dojox/mvc/Output"
            ], function(array, aspect, locale, stamp, Stateful, at, parser, DatePicker){
                window.at = at;
                window.model = new Stateful({
                    date: stamp.toISOString(new Date())
                });
                aspect.after(DatePicker.prototype, "startup", function(){
                    var self = this,
                        slots = this.slots;
                    array.forEach(slots, function(slot){
                        self.own(slot.watch("value", function(){
                            var pattern = slots[0].pattern + "/" + slots[1].pattern + "/" + slots[2].pattern;
                            self._set("value", stamp.toISOString(locale.parse(slots[0].get("value") + "/" + slots[1].get("value") + "/" + slots[2].get("value"), {datePattern: pattern, selector: "date"})));
                        }));
                    });
                });
                parser.parse();
            });
        </script>
    </head>
    <body>
        <div data-dojo-type="dojox/mobile/DatePicker" data-dojo-props="value: at(model, 'date')"></div>
        <div>Date picker value: <span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'date')"></span></div>
    </body>
</html>

希望这可以帮助。

最好的， - 阿基拉

于 2013-11-13T19:55:36.760 回答