Knockout.js-使嵌套的动态字段值可见

我在Knockout中使用嵌套的可观察数组动态创建表单字段集。我希望能够使“分配”字段可见，以便我可以添加用户数据，并确保它不超过100%。请看我的JS小提琴：

JS：

var initialData = [
    /* Sample data
        { prodName: "MSVR", splits: [
            { page: "Page Name", allocation: "10%"},
            { page: "Page Name", allocation: "20%"}]
    }*/
];

var ProductsModel = function(products) {
    var self = this;
    self.mmAllPages = ko.observableArray(['Page 1', 'Page 2', 'Page 3']);
    self.mmProductList = ko.observableArray(['Product 1', 'Product 2', 'Product 3', 'Product 4']);
    self.selectedProduct = ko.observable();
    self.prodAllocation = ko.observable();

    self.products = ko.observableArray(ko.utils.arrayMap(products, function(contact) {
        return { prodName: contact.prodName, splits: ko.observableArray(contact.splits) };
    }));

    self.addProduct = function() {
        currentProduct = self.selectedProduct();
        self.products.push({
            prodName: currentProduct,
            splits: ko.observableArray()
        });
        self.mmProductList.remove(currentProduct);
    };

    self.removeProduct = function(contact) {
        self.products.remove(contact);
        self.mmProductList.push(currentProduct);
    };

    self.addDefinition = function(contact) {
        contact.splits.push({
            page: self.mmAllPages(),
            allocation: self.prodAllocation(),
        });
    };

    self.removeDefinition = function(phone) {
        $.each(self.products(), function() { this.splits.remove(phone) })
    };

    self.productPercent = function(products){
    };

---

现在，当我将分配字段的值设置为prodAllocation observable时，所有后续分配字段都会用该值更新。我不知道如何使这些场独立可见

如果我理解您的意图，那么您的代码有几个问题：

您绑定到

$root.prodAllocation

而不是

分配

您不更新

$root.prodAllocation

对于2，您可以使用以下内容替换addDefinition：

    self.addDefinition = function(contact) {
        var s = {
            page: self.mmAllPages(),
            allocation: ko.observable(),
        };
        s.allocation.subscribe(function () { 
            var sum = 0;
            for (var i = 0; i < contact.splits().length; i++)
                sum += contact.splits()[i].allocation() *1;
            self.prodAllocation(sum);
        });
        contact.splits.push(s);            
    };

self.addDefinition=函数（联系人）{
变量s={
页面：self.mmAllPages（），
分配：ko.observable（），
};
s、 subscribe（函数（）{
var总和=0；
对于（var i=0；i

---

看

你的问题不是很清楚。如果可能的话，你能在变量后面插入括号吗？谢谢你的帮助！我唯一改变的是在求和计算中添加parseInt（），因为对于第一个可观察值，它返回的是NaN。我知道，我是最差的。不过我还有一个问题。当我使用$root.prodAllocation访问prodAllocation时，它会完美地输出求和值，但是，添加新产品时，该值不是独立的。是否有另一种访问变量的方法可以独立输出值？我已经更新了提琴：你说的“价值不是独立的”是什么意思？prodAllocation的价值不是与产品单独挂钩的。因此，当您添加第二个产品时，第一个产品的prodAllocation值已经填充到第二个产品中。您的意思是说每个产品应该有一个prodAllocation？如果是这样，您应该将其移动到

产品

，而不是

根目录