C# 检索数据绑定对象

我创建了一个具有可观察属性的ViewModel。我将此数组绑定到

ul

HTML元素，如下所示：

我的模板是：

姓名：
类型：
尺寸：

我正在使用jQuery的可拖动和可排序资源对列表中的元素进行重新排序。这意味着，当用户更改元素的顺序时，显然ko-databind不会更改，因为jQuery不知道存在敲除

碰巧我希望我的

参数

以用户配置的相同顺序保存。因此，我的方法是通过jQuery选择所有

li

HTML元素，得到一个数组（

var items=$（“.parameterItem”）；

）。如何为

items

中的每个项目获取与

li

HTML元素关联的数据绑定敲除元素

可能吗

我的视图模型：

function parameter(parameterName, parameterType, parameterSize, descriptive, defaultValue, isRequired, ownerViewModel) {
    this.name = ko.observable(parameterName);
    this.type = ko.observable(parameterType);
    this.size = ko.observable(parameterSize);
    this.label = ko.observable(parameterName);
    this.descriptive = ko.observable(descriptive);
    this.defaultValue = ko.observable(defaultValue);
    this.descriptive = ko.observable(descriptive);
    this.isRequired = ko.observable(isRequired);
    this.ownerViewModel = ownerViewModel;
    this.remove = function () {
        ownerViewModel.parameters.remove(this)
    };
}

function excelLoaderViewModel() {
    this.parameters = ko.observableArray([]);
    this.newParameterName = ko.observable();
    this.newParameterType = ko.observable();
    this.newParameterSize = ko.observable();
    this.newParameterDescriptive = ko.observable();
    this.newParameterIsRequired = ko.observable();
    this.newParameterDefaultValue = ko.observable();

    this.systemName = ko.observable();

    this.addParameter = function () {
        this.parameters.push(
            new parameter(
                 this.newParameterName()
               , this.newParameterType()
               , this.newParameterSize()
               , this.newParameterDescriptive()
               , this.newParameterDefaultValue()
               , this.newParameterIsRequired()
               , this));
        this.newParameterName("");
        this.newParameterType("");
        this.newParameterSize("");
        this.newParameterIsRequired(false);
        this.newParameterDefaultValue("");
    }

var myVM = new excelLoaderViewModel();
ko.applyBindings(myVM);

---

最好的办法是使用自定义绑定，在拖放元素时保持ObservalArray与元素同步

这是我不久前写的一篇文章

以下是一个与jQuery模板一起使用的自定义绑定：

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor) {
        var list = valueAccessor();
        $(element).sortable({
            update: function(event, ui) {
                //retrieve our actual data item
                var item = ui.item.tmplItem().data;
                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                //remove the item and add it back in the right spot
                if (position >= 0) {
                    list.remove(item);
                    list.splice(position, 0, item);
                }
            }
        });
    }
};

下面是一个正在使用的示例：

如果您在不使用jQuery模板（或）的淘汰版1.3 beta中使用它，则可以使用1.3中提供的新的

ko.dataFor

方法替换

tmplItem

行：

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor) {
        var list = valueAccessor();
        $(element).sortable({
            update: function(event, ui) {
                //retrieve our actual data item
                var item = ko.dataFor(ui.item[0]);
                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                //remove the item and add it back in the right spot
                if (position >= 0) {
                    list.remove(item);
                    list.splice(position, 0, item);
                }
            }
        });
    }
};

---

最好的办法是使用自定义绑定，在拖放元素时保持ObservalArray与元素同步

这是我不久前写的一篇文章

以下是一个与jQuery模板一起使用的自定义绑定：

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor) {
        var list = valueAccessor();
        $(element).sortable({
            update: function(event, ui) {
                //retrieve our actual data item
                var item = ui.item.tmplItem().data;
                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                //remove the item and add it back in the right spot
                if (position >= 0) {
                    list.remove(item);
                    list.splice(position, 0, item);
                }
            }
        });
    }
};

下面是一个正在使用的示例：

如果您在不使用jQuery模板（或）的淘汰版1.3 beta中使用它，则可以使用1.3中提供的新的

ko.dataFor

方法替换

tmplItem

行：

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor) {
        var list = valueAccessor();
        $(element).sortable({
            update: function(event, ui) {
                //retrieve our actual data item
                var item = ko.dataFor(ui.item[0]);
                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                //remove the item and add it back in the right spot
                if (position >= 0) {
                    list.remove(item);
                    list.splice(position, 0, item);
                }
            }
        });
    }
};

---

令人惊叹的！我在脑海中想象这是可能的，因为在MVVM模式中，我能够获得绑定项。这个绑定处理程序很好。因此，如果我理解正确，您可以向

ko

添加一个新的“事件”，当它开始处理时，它将获得

ul

元素，这是一个jQuery

可排序的

。每当

sortable

触发

update

事件时，您就会得到

ui.item

，它是

li

及其绑定项。无论如何，我现在正在阅读关于定制绑定的淘汰文档，以便全面理解代码。谢谢！我想你明白了。在某个时候，您可能已经编写了一些代码来遍历li元素，找到它们的关联数据，并尝试以正确的顺序重建数组。定制绑定为您做了几件事：1-它将ul设置为可排序（无需自己连接）2-它连接到移动项时jQuery UI触发的

更新
事件。从那里，它识别列表中li的新位置，并相应地移动其关联数据。太棒了！我在脑海中想象这是可能的，因为在MVVM模式中，我能够获得绑定项。这个绑定处理程序很好。因此，如果我理解正确，您可以向
ko
添加一个新的“事件”，当它开始处理时，它将获得
ul
元素，这是一个jQuery
可排序的
。每当
sortable
触发
update
事件时，您就会得到
ui.item
，它是
li
及其绑定项。无论如何，我现在正在阅读关于定制绑定的淘汰文档，以便全面理解代码。谢谢！我想你明白了。在某个时候，您可能已经编写了一些代码来遍历li元素，找到它们的关联数据，并尝试以正确的顺序重建数组。定制绑定为您做了几件事：1-它将ul设置为可排序（无需自己连接）2-它连接到移动项时jQuery UI触发的
更新
事件。从那里，它识别列表中li的新位置，并相应地移动其关联数据。