0

我有一个基于数据库中的表行构建的对象。它具有在该条目中找到的所有属性以及几个 ko.computed，它们是条目字段和显示内容之间的中间层。我需要他们能够翻译某些字段值的外键。

问题如下：其中一个属性是字符串的 ID。我用计算出的 ID 检索该 ID。现在在计算中将有一个如下所示的值：'option1|option2|option3|option4'

我希望用户能够更改选项、添加新选项或交换它们，但我还需要监视用户正在做什么（至少在他添加、删除或移动一个属性时）。因此，我创建了一个可观察的数组，我将以一种允许我监视用户操作的方式绑定它。然后数组将订阅计算，因此它也会更新数据库中的值。

部分代码：

function Control(field) {
    var self = this;
    self.entry = field;  // database entry
    self.choices = ko.observableArray();
    self.ctrlType = ko.computed({
        read: function () {
           ...
        },
        write: function (value) {
            if (value) {
                ...
            }
        },
        owner: self
    });
    self.resolvedPropriety = ko.computed({
        read: function () {
            if (self.ctrlType()) {
                var options = str.split('|');
                self.choices(createObservablesFromArrayElements(options));
        return str;
            }
            else {
                return '';
            }
        },
        write: function (value) {
            if (value === '') {
                //delete entry      
            }
            else {
                    //modify entry
            }
        },
        deferEvaluation: true,
        owner: self
    });
    self.choices.subscribe(function (newValue) {
        if (newValue.length !== 0) {
            var newStr = '';
            $.each(newValue, function (id, el) {
                newStr += el.name() + '|';
            });
            newStr = newStr.substring(0, newStr.lastIndexOf("|"));
            if (self.resolvedPropriety.peek() !== newStr) {
                self.resolvedPropriety(newStr);
            }
        }
    });
self.addChoice = function () {
    //user added an option
        self.choices.push({ name: ko.observable('new choice') });
    };
    self.removeChoice = function (data) {
    //user removed an option
        if (data) {
            self.choices.remove(data);
        }
    };
    ...
}

这种组合有效，但不是我想要的。这是一种循环行为，触发次数过多。这给用户的操作带来了一些负担，因为对数据库有很多请求。

我错过了什么？或者有更好的方法吗？

4

1 回答 1

0

从淘汰赛计算的可观察文档中引用

...在依赖链中包含循环是没有意义的。

我从帖子中解释的基本功能：

  • 基于字段选择，显示属性/选项列表
  • 能够编辑所述属性/选项
  • 能够添加属性/选项
  • 能够删除属性/选项
  • 能够对属性/选项进行排序（在那里，您必须单击文本字段的末端/边缘）
  • 具有保存更改的能力

因此，我提供了该功能的骨架示例，除了最后一个，您描述了@JSfiddle将更改应用于数据库的能力可以通过多种方式解决；除非您愿意牺牲连接开销，否则这些都不应该包括对任何更改数据的计算或订阅。通过将数据（我假设所有这些数据都可以在一次服务调用中收集）格式化为一个漂亮的嵌套可观察视图模型并传递适当的可观察对象，您可以排除对任何ko.computed.

JS：

 var viewModel = {
 availableFields : ko.observableArray([
    ko.observable({fieldId: 'Field1', 
                   properties: ko.observableArray([{propertyName: "Property 1.1"}])}),
    ko.observable({fieldId: 'Field2', 
                   properties: ko.observableArray([{propertyName:"Property 2.1"}, 
                                                   {propertyName:"Property 2.2"}])})]),

 selectedField: ko.observable(),

 addProperty: function() {
    var propertyCount = this.selectedField().properties().length;

    this.selectedField().properties.push({propertyName: "Property " + propertyCount})
 },
};

ko.applyBindings(viewModel);
$("#field-properties-list").sortable({
   update: function (event, ui) {
   //jquery sort doesnt affect underlying array so we have to do it manually          
   var children = ui.item.parent().children();
   var propertiesOrderChanges = [];
   for (var i = 0; i < children.length; ++i) {
     var child = children[i];
     var item = ko.dataFor(child);
     propertiesOrderChanges.push(item)
   }
   viewModel.selectedField().properties(propertiesOrderChanges);
 }
});

HTML：

<span>Select a field</span>

<select data-bind='foreach: availableFields, value: selectedField'>
 <option data-bind='text: $data.fieldId, value: $data'></option>
</select>

<div style="padding: 10px">
 <label data-bind='text: "Properties for " + selectedField().fieldId'></label>
<button data-bind='click: $root.addProperty'>Add</button>
<ul id='field-properties-list' data-bind='foreach: selectedField().properties'>
    <li style = "list-style: none;">
        <button data-bind="click: function() {  $root.selectedField().properties.remove($data) }">Delete</button>
        <input data-bind="value: $data.propertyName"></input>
    </li>
</ul>
</div>
于 2013-10-03T04:29:27.160 回答