带有脏对象的淘汰赛js列表

Question

我正在学习 Knockout，但我被困在一个看似微不足道的问题上。下面是一些修改过的代码，但大部分来自 Pluralsight 课程。我正在使用 MVC4，我所有的数据都来自 JSON 中的控制器。

Public Function GetData() As ActionResult

    Return Json(dataContext.GetData, JsonRequestBehavior.AllowGet)

End Function

这是我的看法

<ul data-bind="foreach: items">
        <li >
            <input type="text" id="name"  data-bind="value: name" />

        </li>
</ul>

还有我的视图模型：

    $(document).ready(function () {

    ko.dirtyFlag = function (root) {
        var result = function () { },
            _initialState = ko.observable(ko.toJSON(root))

        result.isDirty = ko.dependentObservable(function () {
            return _initialState() !== ko.toJSON(root);
        });

        result.reset = function () {
            _initialState(ko.toJSON(root));
        };

        return result;
    };


    function Customer(data) {
          this.name = ko.observable(data.name);
          this.id = ko.observable(data.id);
          this.dirtyFlag = new ko.dirtyFlag(this);
}



    var ViewModel = function (items) {
          var self = this;
          this.items = ko.observableArray([]);

          this.save = function () {
            alert("update");
                };

          this.addNew = function () {
            alert("add");
                };

          this.deleteItem = function () {
           alert("delete");
                 };

          this.dirtyItems = ko.computed(function () {
            return ko.utils.arrayFilter(this.items(), function (item) {
                return item.dirtyFlag.isDirty();
            });
           }, this);

          this.isDirty = ko.computed(function () {
            return this.dirtyItems().length > 0;
          }, this);

        $.getJSON("/home/GetCustomers", function (allData) {
                    var mappedLoadouts = $.map(allData, function (item) { return new     Customer(item) });
                    self.items(mappedLoadouts);
                });
          };

            ko.applyBindings(new ViewModel());

请注意此代码已更改以简化示例。

我的第一个问题是，为什么这不起作用？我不断收到“DirtyItems”，有人能告诉我为什么吗？我看不到范围问题，因为我指的是同一上下文中的客户。

此外，到目前为止，我发现的所有帮助都使用了不同的 Javascript 方法。就像这个类似的问题Best way to get only modified rows from observableArray (when there is bulk edit option)。当我尝试重建我的视图模型以遵循此示例时，我在 foreach 上收到错误：客户（与 DirtyItems 相同的错误）。

这是一个很有希望的问题，但答案再次使用了其他 Javascript 方法Knockout dirty flag event

感谢任何建议！

Answer 1

我不确定，但我猜问题是 Knockout 需要您限定 DirtyItems，因为您在函数中使用它。

<div data-bind="text: ko.toJSON($root.DirtyItems)"></div>

如果您仍然遇到问题，您可能需要发布一个重现问题的小提琴。

Answer 2

我不知道这是否是问题的一部分，但您的 DirtyFlag 代码中有错字：

return ko.utils.arrayFilter(this.**Customerss**, function (item) {

这可能是 Judah 所说的，需要 $root。这也可能是绑定/时间问题。实际的 JavaScript 消息是什么，DirtyItems 是否“未定义”？

作为个人喜好，我尽量避免嵌入在 HTML 中的此类函数调用，因此我会将“ko.toJSON(DirtyItems)”调用移动到计算函数并绑定到该函数。