Model view controller 使用dojox mvc的dojox mobile日期选择器和交换机不工作
我使用dojox.mvc.at将dojox.mobile.Switch的value属性绑定到模型中的属性。当我在模型中更改属性时,开关会响应这些更改;但是,当我更改switch的状态时,模型中的属性没有得到更新 dojox.mobile.DatePicker也存在同样的问题 我正在使用Dojo1.9.0 有人能帮助解决这个问题吗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=
<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);
}