在敲除js中使用'with'進行數據綁定后，如何訪問另一個原型對象

Question

我正在使用基因敲除js，並有一個像這樣的對象：

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;

然后在我的HTML中，使用with綁定：

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

• 這不是我的確切代碼，而是簡化版本

在這種情況下，當用戶單擊按鈕時， this將是我的元數據對象。 因此，我將得到一個未定義的錯誤，因為元數據沒有創建方法。

如果我不使用with綁定，而是這樣綁定： <input data-bind='value: vm.metdatadata().startDate'/>

然后，當用戶單擊時，我得到了整個對象，然后可以調用this.create();

1. 這是預期的行為嗎？
2. 如果是這樣，如何在仍然使用with綁定的情況下如何在addNewPerson方法中訪問我的主模塊？

Answer 1

這是click綁定的預期行為： this將設置為當前的“項目”，因此在您的情況下為metadata對象。

有多種解決方法：

您可以使用bind功能 （剔除帶有自己的版本，如果你的瀏覽器不支持nattily它）的值設置為修復this在你看來你的父對象：

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

或者，您也可以在視圖模型級別中執行相同的操作（由於使用了原型，其語法看起來有些可笑）：

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();
};

或者，您可以使用文章中描述的事件委托模式： 在Knockout.js中重新存在事件委托

您還可以觀看Ryan Niemeyer的精彩視頻： devLink 2013-Knockout.js技巧和竅門 ，其中第二個技巧是關於控制“ this”的