Javascript强制重新计算对象属性的值

我想重复使用一个“对象”，但是，每次访问该对象时，都应该重新计算该对象的一个属性值

在我的代码中，我有一个库，它基本上可以从数据url生成卡片视图列表。此卡片视图列表将添加到页面中。有两种类型的列表：活动建筑列表和存档建筑列表。在这两个列表之间切换是通过按下一个按钮来完成的，该按钮触发如下所示的中继器的“重新启动”功能

存档的建筑物不应该是可点击的。我将一些配置选项传递给我的库，在那里我处理相关的部分。但是，由于我调用卡片视图库的方式，启用单击配置选项的值总是设置为页面加载时的状态

代码外观示例：

$(function () {
    var buildingsContainer = $('#buildings');
    buildingsContainer.repeater({
        url: function () {
            var activeFilter = buildingFilter.find('.btn-primary').data('status');
            return '/Building/All?status=' + activeFilter;
        },
        renderItem: cardTemplates(buildingsContainer).building({
            activateBuildingUrl: '@(Url.Action("ActivateBuilding", "Building"))/{Id}',
            editUrl: '@(Url.Action("Edit", "Building"))/{Id}',
            deleteBuildingUrl: '@(Url.Action("SoftDeleteBuilding", "Building"))/{Id}',
            enableClick: getActiveFilter() === 'Active'
        })
    })
});

function getActiveFilter() {
    var buildingFilter = $('#buildingFilter');
    return buildingFilter.find('.btn-primary').data('status');
}

无论当前按下的按钮是什么，

enableClick

始终设置为页面打开时的状态

为了更好地演示我的问题，我创建了一个JSFIDLE:

---

在这个JSFIDLE中，您可以看到我有一个带有

值

属性的

选项

对象。在按钮的click listeners中，我打印此值。但是，即使我在

活动

和

存档

之间切换，它始终保持启用状态。如何使属性的值重新计算？

问题是对象（

options

）创建一次，属性设置一次

在创建（和属性设置）时，“活动”按钮匹配jQuery选择器（

$（“#容器”）.find（“.btn primary”）

）

与许多语言一样，Javascript使用引用。当您设置对象的属性时，它收到了对jQuery选择器结果的引用，而不是选择器（作为方法）本身的引用

通过在对象上创建一个方法，可以将其更改为更符合预期的行为：

$(function() {
    var options = {
        value: function () {
         return $('#container').find('.btn-primary').data('status')
      }
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log(options.value());
    });
});

因此，您的

options

对象现在有了一个可调用的方法，它可以动态地返回您所期望的内容

否则，我会在所选按钮更改时更新属性：

$(function() {
    var options = {
        value: $('#container').find('.btn-primary').data('status')
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
    options.value = $('#container').find('.btn-primary').data('status');
        console.log(options.value);
    });
});

---

问题是对象（

options

）创建一次，属性设置一次

在创建（和属性设置）时，“活动”按钮匹配jQuery选择器（

$（“#容器”）.find（“.btn primary”）

）

与许多语言一样，Javascript使用引用。当您设置对象的属性时，它收到了对jQuery选择器结果的引用，而不是选择器（作为方法）本身的引用

通过在对象上创建一个方法，可以将其更改为更符合预期的行为：

$(function() {
    var options = {
        value: function () {
         return $('#container').find('.btn-primary').data('status')
      }
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log(options.value());
    });
});

因此，您的

options

对象现在有了一个可调用的方法，它可以动态地返回您所期望的内容

否则，我会在所选按钮更改时更新属性：

$(function() {
    var options = {
        value: $('#container').find('.btn-primary').data('status')
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
    options.value = $('#container').find('.btn-primary').data('status');
        console.log(options.value);
    });
});

---

我想你有两个选择

1） 将属性设置为函数，并对其求值：

$(function() {
    var options = {
        value: ()=>$('#container').find('.btn-primary').data('status')
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log(options.value());
    });
});

jsfiddle：

2） 只需使用“this”直接访问要检查的数据值：

$(function() {
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log($(this).data('status'));
    });
});

---

我想你有两个选择

1） 将属性设置为函数，并对其求值：

$(function() {
    var options = {
        value: ()=>$('#container').find('.btn-primary').data('status')
    };
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log(options.value());
    });
});

jsfiddle：

2） 只需使用“this”直接访问要检查的数据值：

$(function() {
    var container = $('#container');
    container.find('.btn').click(function() {
        container.find('.btn').removeClass('btn-primary').addClass('btn-default');
        $(this).addClass('btn-primary');
        console.log($(this).data('status'));
    });
});

这只是对液化石油气回答的补充

另一种方法是使用一个getter函数，其行为类似于lpg的

value

函数，但可以像普通属性一样使用：

$（函数（）{
变量选项={
//为属性“value”定义一个getter
获取值（）{
返回$（'#container'）。查找（'.btn primary'）。数据（'status'）；
}
};
var container=$（“#container”）；
container.find（'.btn'）。单击（函数（）{
container.find（'.btn'）.removeClass（'btn-primary'）.addClass（'btn-default'）；
$（this.addClass（'btn-primary'）；
console.log（options.value）；//使用属性“value”
});
});

活跃的
存档
这只是对lpg答案的补充

另一种方法是使用一个getter函数，其行为类似于lpg的
value
函数，但可以像普通属性一样使用：


$（函数（）{
变量选项={
//为属性“value”定义一个getter
获取值（）{
返回$（'#container'）。查找（'.btn primary'）。数据（'status'）；
}
};
var container=$（“#container”）；
container.find（'.btn'）。单击（函数（）{
container.find（'.btn'）.removeClass（'btn-primary'）.addClass（'btn-default'）；
$（this.addClass（'btn-primary'）；
console.log（options.value）；//使用属性“value”
});
});

活跃的
存档
您必须更新单击中的选项（此为小提琴）您必须更新单击中的选项（此为小提琴）谢谢！我选择了第一个选项：把它变成一个函数。这就解决了问题！非常感谢。我选择了第一个选项：把它变成一个函数。这就解决了问题！