Question

The select lists are not rendering with the correct option selected. I’ve tried this a number of different ways including a computed selected observable (this.selected = ko.computed(return parseInt(selected(), 10) == this.id; )) and find in array functions.

In production, the dataArea elements would be populated with server side data. Using the divs with “data-” attributes keeps server side and client side scripting separate (I find this helps the designers).

A record would be displayed in non edit mode first with the option to edit by clicking the edit button. In edit mode, the initial values for the record appear in input controls. You would have the option to say, choose another customer and the having the form load new associated projects. Loading a new customer would reset the project list as expected.

So while loading a new customer would work well, its the transition to editing the current values that is causing an issue. The selected project needs to appear in the drop down list. If a new customer is chosen, the list populates with new options and no defaults are required.

http://jsfiddle.net/mathewvance/ZQLRx/

* original sample (please ignore) http://jsfiddle.net/mathewvance/wAGzh/ *

Thanks.

<p>
    issue: When the select options are read, the inital value gets reset to the first object in the options. How do I keep the original value selected when transitioning to edit mode?
</p>

<div>
    <h2>Edit Quote '1001'</h2>

    <div class="editor-row" data-bind="with: selectedCustomer">
        <label>Customer</label>
        <div data-bind="visible: !$root.isEditMode()">
            <span data-bind="text: CompanyName"></span>
        </div>
        <div data-bind="visible: $root.isEditMode()">
            <input type="radio" name="customerGroup" value="1" data-bind="value: id"> Company Name 1
            <input type="radio" name="customerGroup" value="2" data-bind="value: id"> Company Name 2
        </div>
    </div>

    <div class="editor-row">
        <label>Project</label>
        <div data-bind="visible: !isEditMode()">
            <span data-bind="text: selectedProject.Name"></span>
        </div>
        <div data-bind="visible: isEditMode()">
            <select data-bind="options: selectedCustomer().projects, optionsText: 'Name', value: selectedProject"></select>
        </div>
    </div>

    <div>
        <button data-bind="click: function() { turnOnEditMode() }">Edit</button>
        <button data-bind="click: function() { turnOffEditMode() }">Cancel</button>
    </div>
</div>

<hr/>

<div data-bind="text: ko.toJSON($root)"></div>

function ajaxCallGetProjectsByCustomer(customerId) {
    var database = '[{"CustomerId": 1, "Name":"Company Name 1", "Projects": [ { "ProjectId": "11", "Name": "project 11" }, { "ProjectId": "12", "Name": "project 12" }, { "ProjectId": "13", "Name": "project 13" }] }, {"CustomerId": 2, "Name": "Company Name 2", "Projects": [ { "ProjectId": "21", "Name": "project 21" }, { "ProjectId": "22", "Name": "project 22" }, { "ProjectId": "23", "Name": "project 23" }] }]';

    var json = ko.utils.parseJson(database);
    //console.log('parseJson(database) - ' + json);

    //ko.utils.arrayForEach(json, function(item) {
    //    console.log('CustomerId: ' + item.CustomerId);
    //});

    return ko.utils.arrayFirst(json, function(item){
        return item.CustomerId == customerId;
    });
}

var Customer = function(id, name, projects) {
    var self = this;

    this.id = ko.observable(id);
    this.CompanyName = ko.observable(name);

    this.projects = ko.observableArray(ko.utils.arrayMap(projects, function(item) {
        return new Project(item.ProjectId, item.Name);
    }));
};

Customer.load = function(id) {
    var data =  ajaxCallGetProjectsByCustomer(id);

    var customer = new Customer(
        data.CustomerId,
        data.Name,
        data.Projects);
 };

var Project= function(id, name) {
    this.id = id;
    this.Name = ko.observable(name);
 };

var QuoteViewModel = function () {
    var self = this;

    $customerData = $('#customerData'); // data from html elements
    $projectData = $('#projectData');

    // intial values to display from html data
    var customer = new Customer (
        $customerData .attr('data-id'),
        $customerData .attr('data-companyName'),
        [{"ProjectId": $projectData .attr('data-id'), "Name": $projectData .attr('data-name')}]
    )

    this.selectedCustomer = ko.observable(customer);
    this.selectedProject = ko.observable($projectData.attr('data-id'));

    this.isEditMode = ko.observable(false);

    this.selectedCustomer.subscribe(function(){
        // todo: load customer projects from database api when editing
    });

    this.turnOnEditMode = function() {
        var customerId = self.selectedCustomer().id();
        console.log('customerId: ' + customerId);
        Customer.load(customerId);
        self.isEditMode(true);
    };

    this.turnOffEditMode = function() {
        self.isEditMode(false);
    };
};

var viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);

Answer 1

One the initial value you load

this.dongle = ko.observable($dongleData.attr('data-id'));

This would be the string value “3”. Where as the dongle html select element is actually saving/expecting to retrieve the object { "Id": "3", "Name": "dongle 3" }.

Here is a working version that gets the correct initial values and allows editing.

http://jsfiddle.net/madcapnmckay/28FVr/5/

If you need to save the a specific value and not the whole dongle/widget object, you can use the optionsValue attribute to store just the id. Here is it working in the same way.

http://jsfiddle.net/madcapnmckay/VnjyT/4/

EDIT

Ok I have a working version for you. I’ll try to summarize everything I changed and why.

http://jsfiddle.net/madcapnmckay/jXr8W/

To get the customer info to work

The Customer name was not stored in the ajaxCallGetProjectsByCustomer json so when you loaded a customer there was no way to determine the new name from the data received. I added a Name property to each customer in the json with name “Company Name 1” etc.

To get the projects collection to work

The problem here was as stated originally with the dongles. You initialize the selectedProject observable with $projectData.attr('data-id') which equates to string value of 13. This is incorrect as the select list is configured in such a way that it actually saves/expects to receive the project object itself. Changing this id assignment to an object assignment made the initial value of project work correctly.

var project = ko.utils.arrayFirst(customer.projects(), function(project){
    return project.id == Number($projectData.attr('data-id'));
});

this.selectedProject = ko.observable(project);

FYI there was a minor error in the html, the selectedProject.Name needed to be selectedProject().Name. No big deal.

I’m sure you could have figured out those pretty easily. The next bit is where the real issue is. You reload the Customer every time the edit button is clicked. This seems strange and you may want to reconsider that approach.

However what happens is you load a customer object from the server by id. Assign it to the selectedCustomer observable, this actually works fine. But then because the drop down is bound to selectedCustomer().projects and viewModel.selectedProject it expects that selectedProject is a member of selectedCustomer().projects. In the case of objects the equality operator is assessing whether the references match and in your case they do not because the original selectedProject was destroyed with its associated customer when you overwrote the selectedCustomer value. The fact that the ids are the same is irrelevant.

I have put in place a hack to solve this.

var oldProjectId = viewModel.selectedProject().id;
viewModel.selectedCustomer(customer);

var sameProjectDifferentInstance = ko.utils.arrayFirst(customer.projects(), function(project){
    return project.id == oldProjectId;
});

viewModel.selectedProject(sameProjectDifferentInstance || customer.projects()[0]);

This saves the old projectId before assigning the new customer, looks up a project object in the new customer object and assigns it or defaults to the first if not found.

I would recommend rethinking when you load objects and how you handle their lifecycle. If you hold the current objects it memory with a full list of projects included you don’t need to reload them to edit, simply edit and then send the update back to the server.

You may find it easier to hold json from the server in js variables instead of html dom elements. e.g.

<script>var projectInitialData = '@Model.ProjectInitialData.toJSON()';</script>

Hope this helps.