Javascript “数据绑定”；attr"；不'；t工作（？） 目标

从KnockoutJS添加的

DOM

中读取

数据产品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 -->

当我使用Chrome的控制台检查DOM时，我有以下几点：

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

回报总是假的。换句话说，jQuery似乎不考虑KNOKOUTJS生成的<代码>数据产品ID <代码>，因为如果我手工添加<代码>数据产品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 -->

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

根据，它应该可以工作

确实要在应用绑定之后执行$（元素）。每个绑定都要执行吗

JS:

视图：

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

因此，我认为你应该：

• 创建虚拟机实例
• 应用绑定
• 调用一个init函数，在该函数中调用$（元素）

---

我猜在DOM准备就绪之前（在Knockout进行修改之前），您正在执行$

从ViewModel中取出each并将其放入此代码块：

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

---

看起来你在时间上有问题

请注意，knockoutjs首先遍历您的js模型，然后用内容填充视图。因此，如果您正在测试或在您的案例中迭代某个DOM结构，您将直接遇到计时错误

试着重新思考你在那里做什么。由于knockoutjs为html提供数据，因此js代码中已经有了所有数据。对我来说，这看起来像是一轮工作

例如： 您的模板：

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

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

---

如果我弄错了，你只想触发另一个javascript，当你的列表被呈现时，它正在做一些事情，当knockoutjs用内容填充你的页面时，尝试触发一些事件。或者在dom就绪后触发javascript

为什么不在此处使用数据productid=“您的id”？它看起来比数据域中的json编码数据干净得多。您的函数什么时候运行？

$productId

包含什么？你确定这不是一个时间问题，jquery是在敲除绑定应用完成之前运行的吗？我没有尝试过，但是

$match=$（.summary li”）.filter（function（）{var data=$（this.data（）；return（data.attr['produkt-id']=$productId）；}）呢

请发布包含

$（元素）的函数。每个（函数（）{..}

以及您调用该函数的代码。

$（元素）。每个

都是我的KnockoutJS ViewModel中函数的一部分。因此，$（元素）.each在创建VM实例时被调用。当您说

调用一个init函数调用$（元素）时，您能说得更具体一些吗？each

？提前谢谢！您说的是$（元素）。每个都是在创建VM实例时被调用的。您需要做的是调用$（元素）。以后（在ko.applyBindings之后）。我只需要检查具有某个

数据产品id的
li
的长度是否大于0。
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);
    }
});

var vm = { id:'myID-product'};    
ko.applyBindings(vm);    
var element = $("#myID").data("product-id");             
console.log(element);

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

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

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