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('close')();的两种方法时更新“可见”属性值！

谢谢

以下是更新版本：

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

希望它可以帮助那些希望将其集成到他们的应用程序中的人，因为它可以很容易地跟踪您的UI，而无需每次都手动检查...

但是，如果有人知道更好的方法，那么更新jsFiddle版本并链接回评论部分：）

谢谢你们，特别是那些乐于助人的人干杯

Answer 1

每次调用sidebar时，您的代码重新创建选项对象，其中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。

我看不出layout对象的复杂性有任何原因，因此除了确保每次都不会重新创建options之外，不能真正推荐适当的更改。 / p>

如果您愿意使用此类电话：

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>

为什么我无法更新更新我的JavaScript对象属性值？

1 个答案: