使用KnockoutJS进行多个<select>链接,并将依赖关系存储在数据库中</select>

时间:2011-12-16 19:08:28

标签: javascript dependencies knockout.js

我想转换我已经构建的<select />框链接解决方案以使用KnockoutJS。以下是它现在的工作原理:

我有一个数据库,其中包含具有属性的产品,而这些属性的值又依赖于另一个选定的值。

  

产品&gt;属性&gt;值&gt;依赖

     

替补席&gt;长度> 42“&gt;(身高== 16”)

在我的数据库中,我们还存储哪些值依赖于其他值。例如如果高度是16“或类似的长度,长度只能是42”。

这是从服务器到客户端上的JSON对象,它包含树状结构中产品的所有属性,值和依赖关系。

var product = 
{
    attributes: 
    [
        values: 
        [
            value:
            {
                dependencies: [{dependencyOp}]
            }
        ]

    ]
};

我将遍历每个值及其对整个对象的依赖关系,并构建一个类似于“16 == 14&amp;&amp; 4 == 4”的表达式,当然会评估为false(14是来自的选定值)另一个属性)。在那个表达中&amp;&amp;将是依赖项数组中的dependencyOp。

现在我尝试使用KnockoutJS映射插件将对象作为我的视图模型但我的问题是当我创建一个依赖于它的依赖的dependentObservable时。那么现在我必须遍历产品变量中的每个数组/对象?

1 个答案:

答案 0 :(得分:2)

如果我理解了您的问题,那么您正在尝试从服务器获取数据,并使用它来确定用户的输入是否有效。如果是这种情况,请将您的数据结构放入viewModel中的字段中,并使dependentObservable依赖于该字段。

function ViewModel() {
    this.data = ko.observable();
    this.input = ko.observable();
    this.isValid = ko.dependentObservable(function() {
        // evaluate input() against data() to determine it is valid; return a boolean
        return ...;
    }, this);

    this.loadData = function() {
        $.ajax('/data/get', {
             success: function(dataFromServer) {
                 this.data(dataFromServer);
             });
    }
}

var vm = new ViewModel();
ko.applyBindings(vm);
vm.loadData();

现在你可以在像这样的数据绑定属性中引用这个dependentObservable

  <input type="text" data-bind="value: input, valueupdate='afterkeydown'" />
  <div data-bind="visible: isValid">shown only when data is valid...</div>