Javascript 计算出的可观测不工作的淘汰排序表

。正如标题所说，我正试图使用一个计算的可观测值以及rniemeyer淘汰排序示例。我一直在

需要实现write方法

此错误可在开发人员控制台中查看

我的ko.computed上有一个write方法实现，但它仍然出错。我做错了什么

下面是html和javascript

<div id="main">
    <h3>Tasks</h3>
    <div class="container" data-bind="sortable: tasks">
        <div class="item">
            <span data-bind="visible: !$root.isTaskSelected($data)">
                <a href="#" data-bind="text: TestName"></a>
            </span>
            <span data-bind="visibleAndSelect: $root.isTaskSelected($data)">
                <input data-bind="value: name, event: { blur: $root.clearTask }" />
            </span>  
        </div>
    </div>
</div>

var Task = function(first,last) {
    var self = this;
    self.firstName = ko.observable(first);
    self.lastName = ko.observable(last);
    self.TestName = ko.computed({
        read: function (){
            return self.firstName() + " " +  self.lastName();
        },
        write: function (item) {
            console.log(item);
        }
    });

    return self;
}

var ViewModel = function() {
    var self = this;
    self.testTasks = ko.observableArray([
        new Task("test","one"),
        new Task("test","two"),
        new Task("test","three")
         ]);

    self.tasks = ko.computed({
        read: function() { return self.testTasks();},
        write: function(item) {console.log(item);}
    }); 



    self.selectedTask = ko.observable();
    self.clearTask = function(data, event) {
        if (data === self.selectedTask()) {
            self.selectedTask(null);                
        }

        if (data.name() === "") {
           self.tasks.remove(data);   
        }
    };
    self.addTask = function() {
        var task = new Task("new");
        self.selectedTask(task);
        self.tasks.push(task);
    };

    self.isTaskSelected = function(task) {
       return task === self.selectedTask();  
    };
};

//control visibility, give element focus, and select the contents (in order)
ko.bindingHandlers.visibleAndSelect = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.visible.update(element, valueAccessor);
        if (valueAccessor()) {
            setTimeout(function() {
                $(element).find("input").focus().select();
            }, 0); //new tasks are not in DOM yet
        }
    }
};

ko.applyBindings(new ViewModel());

任务
var任务=功能（第一个，最后一个）{
var self=这个；
self.firstName=ko.可观察（第一）；
self.lastName=ko.可观察（last）；
self.TestName=ko.computed({
读：函数（）{
返回self.firstName（）+“”+self.lastName（）；
},
写入：功能（项目）{
控制台日志（项目）；
}
});
回归自我；
}
var ViewModel=函数（）{
var self=这个；
self.testTasks=ko.observearray([
新任务（“测试”、“一”），
新任务（“测试”、“二”），
新任务（“测试”、“三”）
]);
self.tasks=ko.computed({
读取：函数（）{return self.testTasks（）；}，
写入：函数（项）{console.log（项）；}
}); 
self.selectedTask=ko.observable（）；
self.clearTask=函数（数据、事件）{
如果（数据===self.selectedTask（））{
self.selectedTask（空）；
}
如果（data.name（）==“”）{
self.tasks.remove（数据）；
}
};
self.addTask=函数（）{
var任务=新任务（“新”）；
self.selectedTask（任务）；
self.tasks.push（任务）；
};
self.isTaskSelected=功能（任务）{
返回任务===self.selectedTask（）；
};
};
//控制可见性，指定元素焦点，并选择内容（按顺序）
ko.bindingHandlers.visibleAndSelect={
更新：函数（元素、值访问器）{
bindingHandlers.visible.update（元素，valueAccessor）；
if（valueAccessor（））{
setTimeout（函数（）{
$（元素）。查找（“输入”）.focus（）.select（）；
}，0）；//新任务尚未在DOM中
}
}
};
应用绑定（新的ViewModel（））；

正如该插件的作者所说，您不能使用计算的可观察值；可排序插件取决于实际的可观察数组

仔细想想，这是有道理的：插件实际上是在对元素重新排序时操纵数组的各种索引

如果你想两全其美，这里有一个“writableComputedArray”。如果从数组中添加/删除，并且随后对可观察对象的重新计算执行相同的添加/删除操作，订户将不会第二次收到通知。但是，您有责任确保数组的计算与实际添加/删除的内容之间没有差异。您可以通过在可排序绑定的afterMove事件中进行必要的更改来实现这一点

ko.writeableComputedArray = function (evaluatorFunction) {
    // We use this to get notified when the evaluator function recalculates the array.
    var computed = ko.computed(evaluatorFunction);

    // This is what gets returned to the caller and they can subscribe to
    var observableArray = ko.observableArray(computed());

    // When the computed changes, make the same changes to the observable array.
    computed.subscribe(function (newArray) {
        // Add any new values
        newArray.forEach(function (value) {
            var i = observableArray.indexOf(value);

            if (i == -1) {
                // It's a new value, push it
                observableArray.unshift(value);
            }
        });

        // Remove any old ones.  Loop backwards since we're removing items from it.
        for (var valueIndex = observableArray().length - 1; valueIndex >= 0; valueIndex--) {
            var value = observableArray()[valueIndex];

            var i = newArray.indexOf(value);

            if (i == -1) {
                // It's an old value, remove it
                observableArray.remove(value);
            }
        }
    });

    return observableArray;
};