为什么我不能更新更新我的JavaScript对象属性值？

Question

我在更新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('open')();时，我正在尝试更新'visible'属性值app.layout.sidebar('open')(); 和app.layout.sidebar('close')(); 叫做！

谢谢

---

这是更新的版本：

http://jsfiddle.net/Farzad/ndb1490v/3/

希望它对那些希望将其集成到其应用程序中的用户有所帮助，因为它使跟踪UI变得非常容易，而无需您每次手动进行检查...

但是，如果有人知道更好的方法，请对jsFiddle版本进行更新，并在注释部分中链接回来：）

谢谢你们，特别是那些有帮助的人

Answer 1

每次sidebar被调用时，您的代码都会重新创建 options对象，其中false为visible的硬编码值：

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 （例如，其中包含空格，或者以数字开头但不是数字）。