Как сделать двойной ввод записи ko.computed

Question

Я хочу написать вычисление, чтобы я мог выбирать между текстовым вводом и текстом из выпадающего списка, но где-то по маршруту, который я застрял. У меня есть «сбор текстовой строки Из« Я могу выбрать один из «Проекты». Тогда у меня есть флажок, который решает, должен ли текст из выбранного проекта переопределить мою строку ввода-текста.
Если он пуст. выбранный файл 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

Я не уверен, что полностью понимаю ваше желаемое поведение, но я изменил свой скрипт, чтобы использовать дополнительную переменную и исправить выписанную запись. Он может быть перестроен для работы без возможности записи, но я этого не сделал. :)

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/