Question

我想写一个计算器，所以我可以从选择下拉列表中选择文本输入和文本，但是在路线的某个地方我卡住了。我有一个''收集我的文字字符串从''我可以选择'项目'。然后我有一个复选框，用于决定所选项目中的文本是否应覆盖我的input-textstring 如果是空的。选定的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());

小提琴：http://jsfiddle.net/AsleG/srwr37k0/

我哪里出错了？

Answer 1

我不确定我是否完全理解您所希望的行为，但我已经修改了您的小提琴以使用额外的变量并更正您的可写计算。它可以重新安排在没有可写的情况下工作，但我没有。：）

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

1 个答案: