为什么我不能更新更新我的JavaScript对象属性值? [英] Why I can't update update my JavaScript object properties value?
问题描述
我在更新App对象属性值时遇到问题！每当我在App对象中调用方法时，我都试图将"visible"属性从false更新为true！
现在我不知道为什么我不能更新值！！！有人可以帮我吗?
这是代码；
var app = app || {};
app.layout = {
// SIDEBAR
'sidebar': function(a) {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false,
'type': 'wide'
},
'open': function() {
if(options.isActive() === false) {
options.settings.visible = true;
options.settings.object.addClass('active');
}
},
'close': function() {
if(options.isActive() === true) {
options.settings.visible = false;
options.settings.object.removeClass('active');
}
},
'isActive': function() {
if(options.settings.visible === true) {
return true;
} else {
return false;
}
}
}
return options[a];
}
// HEADER
// CONTENT
// FOOTER
}
这个小的App API背后的想法是，我不需要手动检查容器是否可见并手动更改UI，我只需调用app.layout方法即可.
如您所见，当尝试调用app.layout.sidebar('open')();和app.layout.sidebar('close')();的两个方法时，我正在尝试更新'visible'属性值！
谢谢
这是更新的版本:
http://jsfiddle.net/Farzad/ndb1490v/3/
希望它对希望将其集成到其应用程序中的用户有所帮助，因为它非常容易跟踪UI，而无需您每次手动进行检查...
但是，如果有人知道更好的方法，那么请对jsFiddle版本进行更新，并在评论部分进行链接:)
谢谢你们，特别是那些有帮助的人 干杯
每次调用sidebar时，您的代码都会重新创建选项对象，其中false作为
app.layout = {
// SIDEBAR
'sidebar': function(a) {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false, // <=== Note
'type': 'wide'
},
// ...
return options[a];
}
}
所以任何这样的呼叫:
app.layout.sidebar('open')();
...将始终将options.settings.visible视为false.
除了确保不会每次都重新创建options之外，我看不到任何layout对象复杂性的原因，因此不能真正建议适当的更改.
如果您愿意使用这种电话代替
app.layout.sidebar.open();
...然后您可以简化事情:
var app = app || {};
app.layout = (function() {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false,
'type': 'wide'
}
};
return {
sidebar: {
'open': function() {
if(options.isActive() === false) {
options.settings.visible = true;
options.settings.object.addClass('active');
}
},
'close': function() {
if(options.isActive() === true) {
options.settings.visible = false;
options.settings.object.removeClass('active');
}
},
'isActive': function() {
if(options.settings.visible === true) {
return true;
} else {
return false;
}
}
}
// HEADER, e.g.
,
header: {
// ...
}
// CONTENT
// FOOTER
};
})();
请注意，您需要确保代码在.sidebar-left元素存在之后之后运行.
旁注:您在options对象属性键中使用的引号都是可选的，您可以将其省略:
var options = {
settings: {
object: $('.sidebar-left'),
visible: false,
type: 'wide'
}
};
定义sidebar的那些相同.在JavaScript中，唯一需要用引号引起来的是名称是否不是无效的 IdentifierName (例如，其中包含空格，或者以数字开头但不是数字). /p>
I'm having problem with updating my App object properties value! I'm trying to update the 'visible' property from false to true whenever I'm calling methods within my App object!
Now I can't figure out why I can't update the values!!! Could somebody please help me?
Here is the code;
var app = app || {};
app.layout = {
// SIDEBAR
'sidebar': function(a) {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false,
'type': 'wide'
},
'open': function() {
if(options.isActive() === false) {
options.settings.visible = true;
options.settings.object.addClass('active');
}
},
'close': function() {
if(options.isActive() === true) {
options.settings.visible = false;
options.settings.object.removeClass('active');
}
},
'isActive': function() {
if(options.settings.visible === true) {
return true;
} else {
return false;
}
}
}
return options[a];
}
// HEADER
// CONTENT
// FOOTER
}
The idea behind this little App API is that I don't need to go and manually check whether a container is visible and change the UI manually, I could just call the app.layout methods and that should do the job...
As you can see, I'm trying to update the 'visible' property value when the two methods of app.layout.sidebar('open')(); and app.layout.sidebar('close')(); are called!
Thank you
Here is the updated version:
http://jsfiddle.net/Farzad/ndb1490v/3/
Hope it helps those that are looking to integrate this to their app, as it makes it really easy to keep track of your UI without needing you to manually check every time...
However if anybody knows any better approach then make an update to the jsFiddle version and link back in the comments section :)
Thank you guys, specially those who being helpful Cheers
Your code is recreating the options object every time sidebar is called, with false as the hardcoded value of visible:
app.layout = {
// SIDEBAR
'sidebar': function(a) {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false, // <=== Note
'type': 'wide'
},
// ...
return options[a];
}
}
So any call you make like this:
app.layout.sidebar('open')();
...will always see options.settings.visible as false.
I can't see any reason for the complexity in your layout object, and so can't really recommend an appropriate change, other than to make sure options is not recreated each time.
If you're happy to use this kind of call instead:
app.layout.sidebar.open();
...then you can make things much less complicated:
var app = app || {};
app.layout = (function() {
var options = {
'settings': {
'object': $('.sidebar-left'),
'visible': false,
'type': 'wide'
}
};
return {
sidebar: {
'open': function() {
if(options.isActive() === false) {
options.settings.visible = true;
options.settings.object.addClass('active');
}
},
'close': function() {
if(options.isActive() === true) {
options.settings.visible = false;
options.settings.object.removeClass('active');
}
},
'isActive': function() {
if(options.settings.visible === true) {
return true;
} else {
return false;
}
}
}
// HEADER, e.g.
,
header: {
// ...
}
// CONTENT
// FOOTER
};
})();
Note that you need to make sure that code runs after the .sidebar-left element exists.
Side note: The quotes you've used in the options object property keys are all optional, you could just leave them off:
var options = {
settings: {
object: $('.sidebar-left'),
visible: false,
type: 'wide'
}
};
Same goes for the ones defining sidebar. The only time you need quotes around property names in JavaScript is if the name is not a invalid IdentifierName (for instance, has spaces in it, or starts with a digit but isn't a number).
这篇关于为什么我不能更新更新我的JavaScript对象属性值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
