Model view controller 使用dojox mvc的dojox mobile日期选择器和交换机不工作

Model view controller 使用dojox mvc的dojox mobile日期选择器和交换机不工作,model-view-controller,dojo,dojox.mobile,Model View Controller,Dojo,Dojox.mobile,我使用dojox.mvc.at将dojox.mobile.Switch的value属性绑定到模型中的属性。当我在模型中更改属性时,开关会响应这些更改;但是,当我更改switch的状态时,模型中的属性没有得到更新 dojox.mobile.DatePicker也存在同样的问题 我正在使用Dojo1.9.0 有人能帮助解决这个问题吗 <div class="row"> <label for="switch"></label> <div id=

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

dojox.mobile.DatePicker也存在同样的问题

我正在使用Dojo1.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>

这些小部件有不同的问题。类的组合方式与扩展方式(大多数窗口小部件的基类)不匹配。您需要将扩展显式应用于解决该问题,如:

<!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>
希望这有帮助


最好,-Akira

我尝试了您提到的对dojox.mobile.Switch的更改,但不起作用。它仍然是单向绑定的(从模型到视图),而不是从视图到模型。我查看了Switch.js文件,发现“value”属性的更新方式与mvc触发的方式不同。我在dojox/mobile/Switch.js中手动添加了三行代码,两行在_onClick函数中,一行在_changeState中,交换机在mvc和out mvc中都可以正常工作。这些更改有效吗

_changeState: function(/*String*/state, /*Boolean*/anim){
此。_设置(“值”,状态);*/我加的*/


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

我明白了,看起来这是有意义的,尽管我不是dojox/mobile的所有者。您可能需要输入bugs.dojotoolkit.org的票证。
<!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>
_changeState: function(/*String*/state, /*Boolean*/anim){
        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);
    }