KnockoutJS - 行和列计算(KnockoutJS - Row and Column Ca

2019-10-16 15:43发布

这个问题从我的原始和第一个问题“在如下嵌套数据,载入儿童 ”。

我有填充了从包含嵌套对象JSON数据的表(参见颜色编码)。 该表包含每个对象一行是编辑。 这就是所谓的“分配”行。

这些值从JSON对象填充( “值”:{ “N”:4, “N2”:2等)。

首先,我想显示共有每个编辑一行。 当值的行内更新的全部更新。 这背后的这个用例是我想原来的总(Allocation.Total)与观察到的总比较,这样的话我可以改变对控制细胞的CSS类来表示,如果数据发生了变化。

这将在下面示出; (黄色指示的用户的变化)

http://i.stack.imgur.com/XQpLp.jpg

问题的第二部分是处理一列总。 上述问题是使我的头有点痛,但是这一次吹拂我的心灵。 因此,我会睡上一个,然后更新问题一旦它变得更清晰。

有一个其并发症如从使用简化的数据模型出现。 在这说的一切是同类型的对象,(船员)用于分配的话需要改变时,该节点的孩子。 如果节点有孩子“分配”应该叫指南。

简化的代码示例这里...

与柱体部...的Allocated.Total更新,是一个运行总的划分。 这里的区别是这个总正在向下表中的列,没有跨越单列。 这甚至可能吗? 我的心开始融化了一点。

更新-四月26日

对于列总计虽然可以通过硬编码针对节点1,节点2,节点3接近这一点。 我曾希望避免这种情况,因为这些是改变取决于用户/请求节点(例如,它不会永远节点1,节点,节点3)。 我在HTML模板解决了这个问题,因为这些信息可以发现服务器端,使我能够用正确的绑定传递寻呼。

我可以用同样的方法为JavaScript,但正如我们在加载从API数据,它必须能够动态地获取这些信息,然后JavaScript的保持非常干净。 我一直在寻找如何遍历(密钥,对)值,所以节点1,节点2,节点3位可以成为动态的。 然而,这是我得到了相当卡住。

第二部分,它变得非常复杂。 总计是什么我是后一部分,但我还需要一个总的每一列(星期一 - 早餐周一 - 午餐周一 - 晚餐)。 这级联从最深的节点,到最高层。

同样被赎回的也是如此。 所以,一个人可以兑换机票,这反映一路攀升到父节点。 正如有人谁爱的XPath,这将是祖先或自身::船员。

Answer 1:

好。 这是你的总计算应该是什么。

self.totalAllocation = ko.computed(function() {
            var values = self.Allocation.Values;
            return Number(values.node1()) + 
                   Number(values.node2()) + 
                   Number(values.node3());
})

注意节点周围的括号。 这表明,这些已被改为淘汰赛观测。 在当前的代码,它们仅仅是JSON值。 非观测可以绑定到/从淘汰赛值/文字绑定,但是当他们的价值已经改变了他们不通知其他人。 如果totalAllocation是使用简单的JSON值,当他们通过您的值绑定改变它不会自动重新。

我更新您的示例使用映射插件。 这将通过所有的属性会自动旋转,使他们可观。

用于分配的标签是一个简单的。 这可以通过计算和文字结合来实现。

self.allocLabel = ko.computed(function() {
    return self.HasChildren() ? "Guide" : "Allocation";            
});

<th data-bind="text: allocLabel">Allocation</th>

我是不是在最后一部分完全清楚。 这似乎是你想要的Allocated.Total总结其所有子分配。 这是否包括赎回价值? 它应该包括它自己分配的总? 无论答案如何做到这一点是一个计算再次观察到的方式。

就像是。

self.grandTotal = ko.computed(function() {
    var result = 0;              
    for (var i = 0; i < self.Crews().length; i += 1) {
        result += self.Crews()[i].totalAllocation();
    }   
    return result;
});

你可以看到,我只是通过船员阵列循环和总结了totalAllocation为每一个孩子。 如果更新行数分配行总计和列总得到更新。

http://jsfiddle.net/madcapnmckay/CGBZe/

编辑

正如在评论中提到。 动态总数不应该是一个问题(未经测试)。

self.totalAllocation = ko.computed(function() {
     var values = self.Allocation.Values;
     var total = 0;
     for (var prop in values) { 
         total += Number(ko.utils.unwrapObservable(values[prop]));
     }
     return total;
})

希望这可以帮助。



文章来源: KnockoutJS - Row and Column Calculations
标签: knockout.js