KnockoutJS - 禁用绑定 - 如何在 parent 具有值时禁用 child 元素

Question

我写了一个 jsfiddle 来演示我在下面要完成的工作。要求在parent（游览）支付金额输入中输入值时，应禁用child（收费）支付金额。反之亦然，当支付金额输入 child（收费）支付金额输入时，parent 禁用。我想我已经让它完美地用于 parent - 它禁用了两个 child 输入 - 但是当在第二个充电输入中输入一个值时，它不会禁用 parent。它也是硬编码的，所以我需要这部分的帮助：

charges()[0].payAmount() != '' || charges()[0].payAmount() != 0

我看到这个 - Knockoutjs Update child when parent's observable changes - to add a subscriber, but I don't think I can still access/disable the children from there. Or maybe I can, with jQuery? I've also seen this - Is there any way to disable a bunch of form elements at once? - using a binding handler to potentially handle the disabling of the $parent maybe when entering a value in the children's inputs. Seems complicated though. I noticed that in the ko enable binding documentation 你可以传递任意表达式，但你似乎不能传递任何参数，就像当前的 object。而且，在函数签名上，如果我将 excursion 添加为参数，我已经验证它是未定义的。这是我试图附加到 parent 上的禁用绑定的函数，但没有成功，因为 encounter 是未定义的：

function hasChildEntries(encounter) {
    ko.utils.arrayFirst(encounter.charges(), function (charge) {
        console.log(charge + ', ' + charge.payAmount() + '...');
        if (charge.payAmount() != '' || charge.payAmount() != 0)
            return true;
    });
    return false;
};

查看：

<div>
    <ul class="payments">
    <!-- ko foreach: excursions -->
    <li class="payments">
        <div class="payments">
        <a href='#' class="expand glyphicon glyphicon-minus-sign" style="color:grey"></a>
        <a href='#' class="collapse glyphicon glyphicon-plus-sign" style="color:grey"></a>
        </div>
        <div class="payments" data-bind="text: 'Excursion ID: ' + id + '&nbsp;&nbsp;Pay Amount: '"></div>
        <input class="payments" data-bind="
            textInput: payAmount,
            valueUpdate: 'afterkeydown',
            disable: charges()[0].payAmount() != '' || charges()[0].payAmount() != 0" />
        <ul class="payments bullet">
        <!-- ko foreach: charges -->
        <li class="payments">
            <div class="payments" data-bind="text: name + '&nbsp;&nbsp;Pay Amount: '"></div>
            <input class="payments" data-bind="
                textInput: payAmount,
                valueUpdate: 'afterkeydown',
                disable: $parent.payAmount() != '' || $parent.payAmount() != 0" />
        </li>
        <!-- /ko -->
        </ul>
    </li>
    <!-- /ko -->
    </ul>
</div>

查看model/javascript:

var viewModel = function () {
    var self = this;
    self.excursions = ko.observableArray().extend({ rateLimit: 0 });

    function Excursion(id, name, chgAmount, payAmount, charges) {
    this.id = id;
    this.name = name;
    this.chgAmount = chgAmount;
    this.payAmount = ko.observable('');
    this.charges = ko.observableArray(charges).extend({ rateLimit: 0 });
    };

    function Charge(id, name, date, chgAmount, payAmount) {
    this.id = id;
    this.name = name;
    this.date = date;
    this.chgAmount = chgAmount;
    this.payAmount = ko.observable('');
    };

    self.excursions.push(new Excursion('1234', 'Excursion 1', 90.00, 0, undefined));
    ko.utils.arrayFirst(self.excursions(), function (excursion) {
    if (excursion.id = '1234') {
        excursion.charges.push(new Charge(1, 'Trunk Bay', '02/10/2015', 50.00, 0));
        excursion.charges.push(new Charge(2, 'Cinnamon Bay', '02/10/2015', 40.00, 0));
    }
    });
    self.excursions.push(new Excursion('1235', 'Excursion 2', 80.00, 0, undefined));
    ko.utils.arrayFirst(self.excursions(),  function (excursion) {
    if (excursion.id == '1235')
        excursion.charges.push(new Charge(3, 'Coral Bay', '02/11/2015', 80.00, 0));
    });
}

var vm = new viewModel();
ko.applyBindings(vm);

$(".expand").click(function () { 
    $(this).toggle(); 
    $(this).next().toggle(); 
    $(this).parent().parent().children().last().toggle();
}); 
$(".collapse").click(function () { 
    $(this).toggle(); 
    $(this).prev().toggle(); 
    $(this).parent().parent().children().last().toggle();
});

CSS:

.altRow:nth-child(even) td { background-color: #D8D8D8; }
ul.payments { list-style:none; float:left; width:100% }
li.payments { padding-top:10px; float:left; width:100% }
div.payments { float:left }
.expand { width:15px;height:15px; }
.collapse { width:15px;height:15px;display:none }
ul.payments.bullet {list-style-type: disc;}
input.payments { width:80px;height:20px; }

JSFiddle

Answer 1

将计算机添加到您的游览模型中：

this.hasCharges = ko.computed(function() {
  for(var i = 0, len = charges().length; i < len; i++ ) {
    if( charges()[i].payAmount() ) {
      return true;
    }
  }
  return false;
});

然后在您的标记中替换

disable: charges()[0].payAmount() != '' || charges()[0].payAmount() != 0"

和

disable: hasCharges

这将禁用 parent，无论它有多少 children

编辑：fiddle 给你： http://jsfiddle.net/8j8k7h1c/33/

尽量避免在您的函数中使用 'this'，否则作用域会变得混乱。我用了

var self = this;

保持计算函数可以访问电荷。

KnockoutJS - 禁用绑定 - 如何在 parent 具有值时禁用 child 元素

KnockoutJS - disable binding - how to disable child elements when parent has value

knockout.js