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数据绑定不起作用

回答

相关问题