在knockoutJS中将级联Dropbox添加到动态表单答案

【问题标题】：Adding cascading dropbox to dynamic form in knockoutJS在knockoutJS中将级联Dropbox添加到动态表单
【发布时间】：2013-09-20 14:25:40
【问题描述】：

我需要根据来自服务器的 json 数据动态创建表单。数据是分层的，我正在使用模板来创建表单。

我无法确定将级联保管箱添加到我的表单中。问题是对象是动态创建的，当我创建依赖对象时，我只知道父对象的 id，但我没有要订阅的对象。可以假设孩子是在父亲之后创建的。

这是说明需求的数据片段

{"id":4, "name":"q", "description":"Parameter q", "type":"combo", "default":"1", 
    "options": {"A":1, "B":2, "C":3, "D":4}},
{"id":4.1, "name":"q1", "description":"q Dependent", "type":"combo", 
 "default":"1", "parent" : 4 , 
 "options": {"A": {"A1":1.1, "A2":1.2}} ,
             "B": {"B1":2.1, "B2":2.2,"B3":2.3},
             "C": {"C1":3.1, "C2":3.2},
             "D": {"D1":4.1}},

参数 q1 取决于为参数 q 选择的值。

我不确定如何解决这个问题。 This 是我迄今为止所做的 - 我将不胜感激。

【问题讨论】：

查看我之前发布的关于在 Knockout 中创建级联下拉列表的答案，我强烈建议逻辑 - stackoverflow.com/questions/18139120/… - 在您的情况下，您可以通过 AJAX 调用轻松地使依赖计算命中服务器并在 AJAX 调用成功时设置 observableArray
您的示例很有帮助，但不同之处在于，当我将绑定应用于依赖组合时，我没有需要将自己绑定到的对象。让我们问一下这是一种不同的方式，我可以得到父对象的Parameter 对象吗？我试过ko.dataFor($("#" + item.parent))。如果我能得到Parameter 对象，我可以正确设置绑定。

标签： knockout.js

【解决方案1】：

所以，对于clsoure，这是我找到的解决方案：

在创建ParameterFields - 如果一个对象有一个父对象，我将按如下方式定义出价

if (item.type == 'combo') {     
        if (!self.Parent) {
            var options = $.map(item.options , function (value,key) { return {"name":key , "value":value};});
            self.Options = ko.observableArray(options);
            self.SelectedValue = ko.observable(self.Options()[Math.min(self.Default(),self.Options().length-1)].value);
        } else { 
            // save the options
            self.AllOptions = item.options;
            self.SelectedValue = function() { return null;};
            self.Options = ko.computed( function() {                
                // find the parent
                var parent = ko.dataFor($("#" + self.Parent).parent()[0]);
                // fetch only relevant values from the collection
                var parentSelected = parent.Options()[parent.SelectedValue()-1].name;
                return $.map(self.AllOptions[parentSelected] , function (value,key) { return {"name":key , "value":value};});
            }, this, { deferEvaluation : true });
        }
    }

首先，我使用 ko.dataFor 通过 id 获取父对象。然后应用绑定是直截了当的。

注意deferEvaluation : true 的使用。否则失败。原因是父元素（或与此相关的任何其他元素）在 applybinding 结束之前不存在。这也使我能够在儿子之后创建父母。

Working fiddle.

【讨论】：