如何使双输入可写 ko.computed

Question

我想写一个计算器，这样我就可以在文本输入和 select 下拉列表中的文本之间进行选择，但是我卡在了某个地方。我有一个 '' 收集我的文本字符串从一个 '' 我可以在 'Projects' 中选择。然后我有一个复选框，它决定来自 selected 项目的文本是否应该覆盖我的输入文本字符串。
如果为空。 selected project.title 应该设置它。

这是我的代码：

HTML:

<input data-bind="textInput: $root.toDo" placeholder="What to do?" /><br/><br/>

<select data-bind="options: $root.Projects, optionsCaption: '< choose project >', optionsText: 'title', value: $root.selected"></select><br/>
<input id="useProjectTitle" type="checkbox" value="toDoUseProjectTitle" data-bind="checked: $root.toDoUseProjectTitle" />
<label for="useProjectTitle">Use project title as action</label>

<div data-bind="with: $root.toDo">
    <label>I prefer:</label>
    <ul >
        <li >
            Project: <span data-bind="text: $root.toDoProjectAction"></span><br/> <!-- Project title--> 
            To do: <span data-bind="text: $root.toDo"></span>  <!-- toDo -->
        </li>
    </ul>
</div>

还有我的javascript：

Project = function(data){
    var self = this;
    self.id = data.id;
    self.title = ko.observable(data.title);
};

var viewModel = function () {
    var self = this;
    self.Projects = ko.observableArray();

    // data
    self.Projects.push(new Project({
            id: 1, 
            title: 'Friday night live'
        }));
    self.Projects.push(new Project({
            id: 2, 
            title: 'Saturday morning gym'
        }));

    self.selected = ko.observable();
    self.toDoUseProjectTitle = ko.observable(false);

    self.toDoProjectAction = ko.computed(function () {
        var title; 
        var project = self.selected();
        if (project) {
            title = project.title();
        }
        return title;
    });

    self.toDo = ko.computed({
        read: function (value) {
            if (self.selected()) { // not 'undefined' or null
                if (self.toDoUseProjectTitle() || value === null) {
                    value = self.selected().title();
                }
            }
            return value;
        },
        write: function (value) {
            return value;
        },
        owner: self
    });
};

ko.applyBindings(new viewModel());

Fiddle: http://jsfiddle.net/AsleG/srwr37k0/

我哪里出错了？

Answer 1

我不确定我是否完全理解您想要的行为，但我已经修改了您的 Fiddle 以使用额外的变量并更正您的可写计算。它可以重新排列以在没有可写的情况下工作，但我没有。 :)

self.handEntered = ko.observable('');
self.toDo = ko.computed({
    read: function () {
        var value = self.handEntered();
        if (self.selected()) { // not 'undefined' or null
            if (self.toDoUseProjectTitle() || value === null) {
               value = self.selected().title();
            }
        }
        return value;
    },
    write: function (value) {
        self.handEntered(value);
    },
    owner: self
});

http://jsfiddle.net/srwr37k0/14/

如何使双输入可写 ko.computed

How to make double input writeable ko.computed

javascript

jquery

knockout.js