1

I'm setting an observable, but it always returns "undefined". It's not easy to explain, so I'll show what I'm trying to do.

CHECK THE UPDATE IN THE BOTTOM - It contains a fiddle (jsfiddle.net/4uRj5/9) that reproduces the problem.

THE STRUCTURE

I have a main viewmodel with the following structure:

function PurchasePlanViewModel() {

    var main = this;

    // Global Data

    var data = new function () {

        var data = this;

        data.PlanId = ko.observable();

        data.Monitors = ko.observable();
        data.Commands = ko.observable();
        data.HistoryDays = ko.observable();

        // ...

    };

    // SubViewModels

    main.SubscriptionForm = new function () {

        var o = this;

        o.SelectPlan = new function () {

            var oo = this;

            // Data

            oo.PlanId = data.PlanId;

            // ...

            // Methods

            oo.ChoosePlan = function (selectedplan) { // do something ... };

            oo.CustomizePlan = function () {

                // do something ...

                data.PlanId(0);

            };

            // ...

        };
    };
};

The structure called "data" represents all the data that is handled by the page, I defined it as a global private object so that it cannot be used directly in the HTML bindings, but used as reference from the subviewmodels.

Each data can only be binded through the respective subviewmodel, so, each subviewmodel needs to locally define the data referencing the global data.

Everything works fine, the bindings works pretty well, all the objects are synchronized, even those that are common to diferent subviewmodels.

THE PROBLEM

As I said, everything was working fine, until I needed to manually set the PlanId with 0 when the user choose a Custom Plan.

Inside the oo.CustomizePlan, I set the data.PlanId to 0... but it dont works. when I try to get the data.PlanId value, it returns undefined.

I made some testing, and I discovered that the oo.PlanId = data.PlanId is the reason for this unwanted behavior.

THE QUESTION

How can I set the data.PlanId in this structure? What I'm missing?

I really would like to preserve this structure (a private data only structure).

UPDATE I created a FIDDLE with the code above. When clicking in the Create Custom Plan, the data.PlanId(0) is not working.

Hope someone can help me with this! Thanks!

6
  • Inside the oo.CustomizePlan, I set the data.PlanId to 0... but it dont works.: What do you mean by "dont work"? What does it do? Throw an error? Do nothing? Do something unexpected? Can you reproduce your problem in a simplified fiddle? I made some testing, and I discovered that the oo.PlanId = data.PlanId is the reason for this unwanted behavior. What unwanted behavior? But likely oo.PlanId = data.PlanId isn't what you actually wanted, but it's hard to see what you are actually trying to do. May 28, 2014 at 19:03
  • Hi Matt! I'll create fiddle to reproduce this. Some explanations: * unwanted behavior: the observable can't be set and returns undefined when evaluating it. * for some reason, after execute oo.PlanId = data.PlanId i can't set the observable with data.PlanId(0) anymore.
    – TPaim
    May 28, 2014 at 19:19
  • I created a fiddle, and everything works for me, maybe I just got it wrong? jsfiddle.net/FMGd6/1
    – pscheit
    May 28, 2014 at 19:46
  • Hi @P.scheit! I created a Fiddle too (jsfiddle.net/4uRj5/9). Comparing and mixing with yours, it looks like the problem occurs when you have a view binded to the viewmodel.
    – TPaim
    May 28, 2014 at 19:52
  • Looking at your fiddle, I'm having a hard time understanding what you think you are doing. You assign a function to the variable data, but as far as I can see, you never actually execute that function. So, of course, data.PlanId is undefined. Did you mean for data to be an object literal instead? Or an IIFE? Or at least be called and return something? May 28, 2014 at 20:04

3 Answers 3

0

I believe that the issue here is with isolated scopes. I was able to fix the problem and you can find it in this JSFiddle.

I tried to keep your data structure, but I don't think we need to replicate the data attributes in your sub-view models. In your example data has only one attribute (PlanId). In this case, I don't see major issues in replicating that. But as the data attributes grows the complexity envolved in replicating them in your sub-models grows as well.

As a result, I set the sub-model data to an observable of the global data and everything worked fine. And, in my opnion, this makes sense.

Your viewmodel would look like this:

main.SubscriptionForm = new function () {

    var o = this;

    o.SelectPlan = new function () {

        var oo = this;

        // Data is an observable 
        oo.data = ko.observable(data);

        // ...

        // Methods
        oo.CustomizePlan = function () {
            // do something ...
            alert(oo.data().PlanId());
            oo.data().PlanId(0);
            alert(oo.data().PlanId());
        };
        // ...
    };
};

Your template would look like this:

<div data-bind="with: SelectPlan">
    <select data-bind="value: data().PlanId">
        <option value="0">Choose a Plan...</option>
        <option value="1">Plano 01</option>
        <option value="2">Plano 02</option>
        <option value="3">Plano 03</option>
    </select>
    <button data-bind="click: CustomizePlan">Create a Custom Plan</button>
</div>
0

Actually, I found the exact problem. Your default option is a String.

<option>Choose a Plan...</option>

While your next options you treat them as an integer

<option value="1">Plano 01</option>

And you update them as integer also...

 data.PlanId(0);

Fix 1:

Update your default value to be 0

<option value="0">Choose a Plan...</option>

Fix 2:

When you manually updating PlanId, deal with them as regular Strings.

data.PlanId("1");

I have created yet another JSFiddle that addresses the Fix 1.

0

In my opinion you're just doing it right:

oo.PlanId = data.PlanId;

creates a reference in your own Model to the private data.observable. In "CustomizePlan" you can either set oo.PlanId or data.PlanId to change the value of both from them.

Maybe you crossed the issue out while creating the sample code for the post on Stack Overflow? Look at this fiddle, this works for me:

http://jsfiddle.net/FMGd6/1/

Okay, so I will point you to another thing as well: When you're binding to the select with a value binding, your observable gets constraint to the values in the options of the select. As statet in the knockout documentation:

But what happens if you set the model value to something that has no corresponding entry in the list? The default behavior is for Knockout to overwrite your model value to reset it to whatever is already selected in the dropdown, thereby preventing the model and UI from getting out of sync.

http://knockoutjs.com/documentation/value-binding.html

You you can only set "1", "2", and "3" (note: these are different from 1,2,3 because they are integers)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.