Typescript knockoutjs數據綁定不起作用

試圖獲得knockoutjs（2.21）介紹使用typescript（0.9）的教程。數據綁定似乎不起作用。這是我多年來看到的第一個JavaScript。我想我錯過了如何正確地將html連接到使用typescript類生成的viewmodel。只有在我嘗試將該類引入該教程時纔會出現問題。這是一個jsfiddle。Typescript knockoutjs數據綁定不起作用

HTML片段：

<body> 
<!-- This is a *view* - HTML markup that defines the appearance of your UI --> 

<p>First name: <strong data-bind="text: firstName"></strong></p> 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 

<p>First name: <input data-bind="value: firstName" /></p> 
<p>Last name: <input data-bind="value: lastName" /></p> 

<p>Full name: <strong data-bind="text: fullName"></strong></p> 

<button data-bind="click: capitalizeLastName">Go Caps</button> 
</body>

打字稿片段

class koIntroductionViewModel { 
    firstName: any; 
    lastName: any; 
    fullName: any; 

    constructor() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname()); 
    } 

    createFullname() { 
     return this.firstName + " " + this.lastName; 
    } 

    capitalizeLastName() { 
     var currentVal = this.lastName; 
     this.lastName = currentVal.toUpperCase(); 
    } 
} 

window.onload =() => { 
    ko.applyBindings(new koIntroductionViewModel()); 
}

生成的JavaScript

var koIntroductionViewModel = (function() { 
    function koIntroductionViewModel() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname()); 
    } 
    koIntroductionViewModel.prototype.createFullname = function() { 
     return this.firstName + " " + this.lastName; 
    }; 

    koIntroductionViewModel.prototype.capitalizeLastName = function() { 
     var currentVal = this.lastName; 
     this.lastName = currentVal.toUpperCase(); 
    }; 
    return koIntroductionViewModel; 
})(); 

window.onload = function() { 
    // Activates knockout.js 
    ko.applyBindings(new koIntroductionViewModel()); 
};

來源

2013-06-25 javelinBCD

http://meta.stackexchange.com/questions/147616/what-do-you-mean-it-doesnt-work –

對不起，我應該說數據綁定不起作用的標題。 – javelinBCD

JavaScript代碼應該更是這樣的：

var koIntroductionViewModel = (function() { 
    function koIntroductionViewModel() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname, this); // 1 
    } 
    koIntroductionViewModel.prototype.createFullname = function() { 
     return this.firstName() + " " + this.lastName(); // 2 
    }; 

    koIntroductionViewModel.prototype.capitalizeLastName = function() { 
     var currentVal = this.lastName(); // 2 
     this.lastName(currentVal.toUpperCase()); // 3 
    }; 
    return koIntroductionViewModel; 
})();

你不應該調用createFullname()函數，在這裏，你試圖將函數傳遞給計算的observable，而不是它的返回值。另外，如果您打算在計算函數中使用this，則您也必須通過所有者。通過聲明的計算爲：
```
ko.computed(this.createFullname, this); 
```
這樣的話，你說，如果this在createFullname()函數中使用，這this應參照this在目前情況下。
可觀察物是函數。您必須調用它來讀取它所保存的值。
要將值存儲在observable中，必須調用傳入值的observable作爲參數進行存儲。

Updated fiddle

相應的打字稿是：

class koIntroductionViewModel { 
    firstName: any; 
    lastName: any; 
    fullName: any; 

    constructor() { 
     this.firstName = ko.observable("Bert"); 
     this.lastName = ko.observable("Bertington"); 
     this.fullName = ko.computed(this.createFullname, this); 
    } 

    createFullname() { 
     return this.firstName() + " " + this.lastName(); 
    } 

    capitalizeLastName() { 
     var currentVal = this.lastName(); 
     this.lastName(currentVal.toUpperCase()); 
    } 
}

來源

2013-06-25 20:00:26

這兩個工作，感謝您的解釋。我正在接近它的工作。 – javelinBCD

給這個修改撥弄了一槍..

http://jsfiddle.net/9nnnJ/5/

var koIntroductionViewModel = (function() { 
    var self = this; 
    this.firstName = ko.observable("Bert"); 
    this.lastName = ko.observable("Bertington"); 
    this.fullName = ko.computed(function() { 
     return self.firstName() + " " + self.lastName(); 
    }); 


    this.capitalizeLastName = function() { 
     var currentVal = self.lastName(); 
     self.lastName(currentVal.toUpperCase()); 
    }; 

}); 


var model = new koIntroductionViewModel(); 

ko.applyBindings(model);

來源

2013-06-25 20:00:29

Typescript knockoutjs數據綁定不起作用

回答

相關問題