When I click the save link for a new blog topic, the console output is empty values for the topic object. When I click the save link for a existing blog topic, the output is the old values for the topic object.
Why isn’t the values being assigned the property when the save link is clicked?
var viewModel = function(topics){
var self = this;
self.topics = ko.observableArray(topics);
self.editing_topic = ko.observable("");
self.new_topic = function(){
self.edit_topic({});
}
self.edit_topic = function(topic){
self.editing_topic(topic);
form.dialog({width:800, height:600, modal:true});
};
self.save_topic = function(){
console.log(self.topic());
};
};
ko.applyBindings(new viewModel(jsondata));
<fieldset class="blog_topic_form" title="New Blog Entry">
<div>
<label for="topic_title">
Title:
</label>
<input type="text" id="topic_title" data-bind="value: topic().topic_title"/>
</div>
<div>
<label for="message_contents">
Message:
</label>
<textarea id="message_contents" class="message_contents" data-bind="value: topic().message_contents"/>
</div>
<footer>
<a class="save_link" data-bind="click: save_topic"></a>
<a class="cancel_link"></a>
</footer>
</fieldset>
Edit:
Here is the jsfiddle:
http://jsfiddle.net/jLkxG/3/
When you run it, it will assign the default values. However, if you edit the textbox and click savelink, it will output the original (initial) values instead of the values entered in the textbox.
Please update your code to match the code in the jsfiddle.
In the jsfiddle, your editing_topic properties (topic_title and message_contents) should be defined as observable, not the editing_topic property itself.
I’ve updated your jsfiddle to work correctly: http://jsfiddle.net/jLkxG/4/