在敲除js中使用'with'进行数据绑定后，如何访问另一个原型对象

Question

I'm using knockoutjs and have an object like this:

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
};

home.prototype.create = function(){
   alert('creating');
};

home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

return home;

Then in my HTML, I use the with binding:

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson />
</div>

• this isn't my exact code, but a simplified version

When the user clicks on the button in this situation, this will be my metadata object. So I'll get an undefined error, because metadata doesn't have a create method.

If I don't use the with binding and instead bind like this: <input data-bind='value: vm.metdatadata().startDate'/>

Then when the user clicks, I get my entire object, and I can call this.create();

1. Is this expected behavior?
2. If it is, how can I access my main module in the addNewPerson method while still using the with binding?

Answer 1

This is the expected behavior of the click binding: this will be set the current "item" so in your case the metadata object.

There are multiple ways to solve this:

You can use bind function (Knockout comes with its own version if your browser does not nattily supports it) to fix the value of this to your parent object in your view:

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson.bind($parent) />
</div>

Or you can do the same in your viewmodel level (the syntax looks a little bit funny because of the usage of the prototype):

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
    this.addNewPerson = this.addNewPerson.bind(this);
};


home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

Or you can use the event delegation pattern described in the article: Revisting Event Delegation in Knockout.js

You can also check out Ryan Niemeyer's nice video: devLink 2013 - Knockout.js Tips and Tricks where the second tip is about Controlling “this”