Question

在渲染我的HTML时，我想检查Handlebars循环中当前对象的isActive属性是true还是false。所以我的对象数组访问给定的url参数，属性必须自己检查bool。

module.exports = (url) => {
  return {
    menu: [{
      href: '/1.1',
      isActive: function() {
        return this.href == url;
      }
    }, {
      href: '/1.2',
      isActive: function() {
        return this.href == url;
      }
    }, {
      href: '/1.3',
      isActive: function() {
        return this.href == url;
      }
    }]
  }
};

如您所见，我总是需要设置一个比较功能。我试图创建一个函数

const isActiveLink = (obj) => {
   return obj.href == url;
}

在我的菜单中，我选择

isActive: isActiveLink(this);

但执行此操作时，对象未定义。有没有办法以更干净的方式根据给定的参数保持isActive动态？

Answer 1

创建时，您无法使用this引用简单的JS对象。您可能希望了解this的更多详细信息。这可能令人困惑。

一种做你想做的事的方法是创建一个像这样的类：

class MenuItem {
    constructor(href, url) {
        this.href = href
        this.url = url
    }

    isActive() {
        return this.href == this.url;
    }
}

然后你可以像这样进行导出：

module.exports = (url) => {
    return {
        menu: [
            new MenuItem('/1.1', url),
            new MenuItem('/1.2', url),
            new MenuItem('/1.3', url)
        ]
    }
};

比较JavaScript中对象数组中对象的属性

1 个答案: