Question

How can I set an observable property without any subscriptions firing for it?

I have a scenario were the page loads, an ajax call is made to get some data, the data is looped over and the currently selected item is then set to an observable. I want to be able to set this observable without any subscriptions for it firing because the first time this observable is set is considered its initial sate and the subscriptions should not execute on initial state.

function PlanViewModel() {
    var self = this;

    self.plans = ko.observableArray();
    self.selectedItem = ko.observable();

    self.getAllPlans = function () {
        $.ajax({
            url: "/Backoffice/Home/GetAllPlans",
            type: "POST",
            data: {},
            context: this,
            success: function (result) {
                var planList = this.plans;
                // clear the plan list
                planList.removeAll();
                $.each(result.plans, function () {
                    var planDetail = new PlanDetail(this, self);
                    if (this.IsSelected) {
                        self.selectedItem(planDetail); // how do I set this without the subscriptions firing?
                    }
                    planList.push(planDetail);
                });
            },
            error: function (result) {
                alert("An error occured getting plans.");
            }
        });
    }

    self.selectedItem.subscribe(function (newItem) {
        newItem.repositoryUpdateSelectedPlan();
    } .bind(self));
}

Answer 1

Thanks, I went down that route and its working with some modifications. The selectedItem observable must be defined on the model from the get go because its used in bindings all over the place but I did move the subscription portion like you’ve suggested and that’s working out great.

function PlanViewModel() {
    var self = this;

    var selectedItemSubscription = null;

    self.plans = ko.observableArray();
    self.selectedItem = ko.observable();

    self.getAllPlans = function () {
        $.ajax({
            url: "/Backoffice/Home/GetAllPlans",
            type: "POST",
            data: {},
            context: this,
            success: function (result) {
                var planList = this.plans;
                // clear the plan list
                planList.removeAll();
                $.each(result.plans, function () {
                    var planDetail = new PlanDetail(this, self);
                    if (this.IsSelected) {
                        if (selectedItemSubscription != null)
                            selectedItemSubscription.dispose();

                        self.selectedItem(planDetail);
                    }
                    planList.push(planDetail);
                });

                selectedItemSubscription = self.selectedItem.subscribe(function (newItem) {
                    newItem.repositoryUpdateSelectedPlan();
                }.bind(self));
            },
            error: function (result) {
                alert("An error occured getting plans.");
            }
        });
    }
}