Using multiple viewModels within knockout.js

Question

I'd like to keep my knockout script more organized, moreover, I'd like to avoid naming 2 functions the same thing by accident. So I was wondering if I could nest viewModels in the same function like so (I kept it real simple): Fiddle

Here's the HTML

<p>First name: <strong data-bind="text: other.firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: other.lastName">todo</strong></p>
<p>Full name: <strong data-bind="text: other.fullName">todo</strong></p>

and the JS:

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Bertington"),
        /*fullName: ko.computed(function(){
            return this.firstName + " " + this.lastName;
            }, this)*/

        }
}

This works fine, but if I uncomment the ko.computed it'll crash. Is there any way to organize my knockout in this way, why is the computed crashing, is there any way to write the ko.computed function so it will work?

EDIT: Problem #2

If I have a form any form like this:

<form data-bind="submit: other.otherSubmit" data-ajax="false">
    <button type="submit">Submit</button>
</form>

and I add a handler for submit like so:

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });
            self.otherSumbit = function(){}
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());

why does the error console return this:

The value for a submit binding must be a function

Thank you both it turns out what was missing in the program that I was writing was that I had written self.other = function(){... and not self.other = new function(){... the "new" basically made my entire program work properly — Thierry Blais
– Thierry Blais, Commented Feb 21, 2013 at 13:42

Anh Bui · Accepted Answer · 2013-02-21 02:05:30Z

2

Can try this:

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        var self = this;
        self.other = new function(){     
            var self = this;
            self.firstName = ko.observable("Bert");
            self.lastName = ko.observable("Bertington");
            self.fullName = ko.computed(function(){            
                return self.firstName() + " " + self.lastName();
                });        
            }
    }

// Activates knockout.js
ko.applyBindings(new AppViewModel());

answered Feb 21, 2013 at 2:05

Anh Bui

2931 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff Mercado · Accepted Answer · 2013-02-21 02:51:07Z

1

The problem in your first case was that in that context, this referred to the view model. Within your object literal, your object did not exist yet so you wouldn't have been able to set up your computed observable that way. You would've had to add it to the object after it was created.

Either like this (which is ugly):

function AppViewModel() {
    var self = this;
    self.other = {
        firstName: ko.observable('Bert'),
        lastName:  ko.observable('Bertington')
    };
    self.other.fullName = ko.computed(function() {
        return this.firstName() + ' ' + this.lastName();
    }, self.other);
}

Or like this (as you've done similarly in your second example):

function AppViewModel() {
    var self = this;
    self.other = new function() {
        this.firstName = ko.observable('Bert');
        this.lastName = ko.observable('Bertington');
        this.fullName = ko.computed(function() {
            return this.firstName() + ' ' + this.lastName();
        }, this);
    };
}

Of course there are other ways you could write the above examples but you get my point.

In your second example, you just misspelled your function. In the view model it was named otherSumbit while your view had it otherSubmit.

answered Feb 21, 2013 at 2:51

Jeff Mercado

136k34 gold badges268 silver badges282 bronze badges

1 Comment

Thierry Blais Over a year ago

Thanks, let me try some stuff out I'll no doubt accept in a few minutes

BenMorel · Accepted Answer · 2013-12-07 16:37:28Z

0

one technique that I use to organize my VM using knockout:

//load view
    $.get(url, function(view){
        $("#content').html(view);
        ko.applyBindings(new myVM(), $('#content')[0]);
    })

edited Dec 7, 2013 at 16:37

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Feb 21, 2013 at 2:28

Anh Bui

2931 silver badge8 bronze badges

Comments

Janith Widarshana · Accepted Answer · 2015-08-12 19:32:40Z

If someone looking for a solution for this kind of solution please try following method

Html View

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="container1">
        <ul>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <div id="container2">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/DataFunction.js"></script>
    <script src="js/Container1ViewModel.js"></script>
    <script src="js/Container2ViewModel.js"></script>

</body>
</html>

For this view I'm creating 2 view models for id=container1 and id=container2 in two separate javascript files.

Container1ViewModel.js

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

}

Container2ViewModel.js

function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}

Then after these 2 viewmodels are registering as separate viewmodels in DataFunction.js

var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

Like this you can add any number of viewmodels for separate divs. But make sure do not create separate view model for a div inside registered div.

Collectives™ on Stack Overflow

Using multiple viewModels within knockout.js

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related