writeable ko.computed
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<input data-bind="textInput: $root.toDo2" placeholder="What to do -test?" /><br/>
<span data-bind="text: $root.toDo2"></span><br/>
<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.toDoProjectAction = ko.computed(function () {
var title;
var project = self.selected();
if (project) {
title = project.title();
}
return title;
});
self.toDoUseProjectTitle = ko.observable(false);
self.toDo2 = ko.observable();
self.toDo = ko.computed({
read: function () {
var value;
if (self.selected()) { // not 'undefined' or null
if (self.toDoUseProjectTitle() || self.toDo2() === null) {
value = self.selected().title();
}
}
return value;
},
write: function (value) {
self.toDo2(value);
},
owner: self
});
};
ko.applyBindings(new viewModel());