javascript - 数据绑定(bind) "attr"不起作用(？)

Question

目标

从KnockoutJS添加的DOM中读取data-product-id。

问题

我有以下标记:

<!-- ko foreach: Summary.products -->
<li data-bind="attr: { 'data-product-id': id }">
    <div class="product-summary-actions float-right">
        <button class="btn btn-danger btn-mini remove-item">
            <i class="icon-remove"></i>
        </button>
    </div>
    <div class="product-summary-quantity">
        <h6 data-bind="text: infoComposition"></h6>
    </div>
    <div class="product-summary-description">
        <p data-bind="text: name"></p>
    </div>
</li>
<!-- /ko -->

如您所见，在带有 attr 绑定(bind)的注释之后的第一行有一个数据绑定(bind)。看:

<li data-bind="attr: { 'data-product-id': id }">

当我使用 Chrome 的控制台检查我的 DOM 时，我有以下内容:

<li data-bind="attr: { 'data-product-id': id }" data-product-id="1">...</li>

如您所见，data-product-id 已成功 应用。但是，当我不得不与他进行交流时，没有成功。

我的应用程序中有一个函数负责检查我的产品摘要中是否存在某个项目，以下循环执行此操作:

$(element).each(function () {
    var $productId = $(this).closest("li").data("product-id"),
    $match = $(".summary")
             .find("li[data-product-id=" + $productId + "]").length > 0;
     console.log($match);
});

总是返回false。换句话说，jQuery 似乎不考虑 KnockoutJS 生成的 data-product-id 因为如果我手动将 data-product-id 属性添加到我的项目(像下面的标记)，一切正常。

<!-- ko foreach: Summary.products -->
<li data-product-id="1">
    <div class="product-summary-actions float-right">
        <button class="btn btn-danger btn-mini remove-item">
            <i class="icon-remove"></i>
        </button>
    </div>
    <div class="product-summary-quantity">
        <h6 data-bind="text: infoComposition"></h6>
    </div>
    <div class="product-summary-description">
        <p data-bind="text: name"></p>
    </div>
</li>
<!-- /ko -->

好的...代码

我的必需 HTML:

<button class="btn btn-success btn-small add"
        title="Add to comparison list">
    <i data-bind="attr: { class: ProductLayout.existsAtSummary($element) ? 
                  'icon-minus' : 'icon-plus' }">
    </i>
</button>

我的JS:

function ProductLayoutViewModel() {
    var self = this;

    self.itemQuantity = ko.observable("");
    self.itemQuantityValid = ko.computed(function () {
        var q = self.itemQuantity();
        return q != "0" && q != "00" && q != null && q != "";
    }, this);

    self.existsAtSummary = function (element) {
        $(element).each(function () {
            $productId = $(this).closest("li").data("product-id");
            $match = $(".summary")
                     .find("li[data-product-id=" + $productId + "]").length;

            if (!$match)
                return true;
            else
                return false;
        });
    });
};

ViewModel = {
    Summary: new SummaryViewModel(),
    ProductLayout: new ProductLayoutViewModel()
};

$.ajax({
    url: "/ProductsSummary/List?output=json",
    dataType: "json",
    success: function (data) {
        var mappingOptions = {
            create: function (options) {
                return (new (function () {
                    this.finalMeasure = ko.computed(function () {
                        return this.quantity() > 1 ? 
                               this.measure() + "s" : this.measure();
                    }, this);

                    this.infoComposition = ko.computed(function () {
                        return this.quantity() + ' ' + this.finalMeasure();
                    }, this);

                    ko.mapping.fromJS(options.data, {}, this);
                })());
            }
        };

        ViewModel.Summary.products = ko.mapping.fromJS(data, mappingOptions);
        ko.applyBindings(ViewModel);
    }
});

有人知道我该如何解决这个问题？谢谢!

Answer 1

看起来你的时间有问题。

请注意，knockoutjs 首先遍历您的 js 模型，然后用内容填充 View 。因此，如果您正在测试或在您的情况下迭代某些 DOM 结构，您会直接遇到计时错误。

尝试重新思考您在那里所做的事情。由于 knockoutjs 正在为 html 提供数据，因此您的 js 代码中已经拥有所有数据。对我来说，这看起来像是一个变通办法。

例如:您的模板:

<!-- ko foreach: Summary.products -->
<li data-bind="attr: { 'data-product-id': id }">
</li>
<!-- /ko -->

在 knockoutjs 中，您已经有了产品列表和特定的产品 ID。所以您需要做的就是检查列表的长度？还是我错过了什么？

如果我弄错了，而你只是想触发另一个在呈现列表时执行某些操作的 javascript，请尝试在 knockoutjs 用内容填充你的页面时触发一些事件。或者在 dom 准备好后触发你的 javascript。