淘汰賽/打字稿ko.observables使用對象

Im做了介紹教程淘汰賽，本教程的第二部分是可觀察的，我有我的.ts下面的代碼（後來的.js）：淘汰賽/打字稿ko.observables使用對象

/// <reference path="../typings/index.d.ts" /> 

$(document).ready(function() { 
    ko.applyBindings(new ViewModel()); 
}); 

class Person { 

    firstName: string; 
    lastName: string; 

    constructor(firstName: string, lastName: string) { 
     this.firstName = firstName; 
     this.lastName = lastName 
    } 
} 

var ViewModel = function() { 

    var person = new Person('MyName', 'MyLastName'); 
    this.person = person; 

    this.person = ko.observable(person.firstName); 
    this.person = ko.observable(person.lastName); 
};

和我在我的CSHTML如下：

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 

    <script src="~/bower_components/jquery/dist/jquery.js"></script> 
    <script src="~/bower_components/knockout/dist/knockout.js"></script> 
    <script src="~/Scripts/greeter.js"></script> 

    <title>Index</title> 
</head> 
<body> 
    <div> 
     <p>FirstName: </p> <p data-bind="text: person.firstName"></p> 
     <p>LastName: </p> <p data-bind="text: person.lastName"></p> 

     <p>First name: <input data-bind="value: person.firstName" /></p> 
     <p>Last name: <input data-bind="value: person.lastName" /></p> 
    </div> 
</body> 
</html>

當運行Web應用程序，而不是顯示在我的<p>標籤「MYNAME」和「MyLastName」這說明不了什麼，當我在<input>寫它不會在我的<p>標籤中顯示任何內容。

所以問題是，有可能改變一個類的屬性或我需要它只改變變量？

來源

2017-04-11 Nickso

更好的解決辦法是改變Person類的構造函數來創建可觀察：

class Person { 
    firstName: KnockoutObservable<string>; 
    lastName: KnockoutObservable<string>; 

    constructor(firstName: string, lastName: string) { 
     this.firstName = ko.observable(firstName); 
     this.lastName = ko.observable(lastName); 
    } 
} 

var ViewModel = function() { 
    this.person = new Person('MyName', 'MyLastName'); 
};

這也將是更好地創建視圖模型類。

來源

2017-04-16 10:32:44

我同意你的回答，我在同一個教程中看到它，並且合理，減少了寫作。 – Nickso

我有一個問題，價值沒有被綁定到我的p標籤 – Nickso

您是否使用'文本'綁定？同時檢查開發人員工具控制檯，看看是否有任何錯誤。還有你安裝敲打類型打字稿？ –

好吧，我發現這個問題，這是不是對我的打字稿，：

var ViewModel = function() { 

    var person = new Person('MyName', 'MyLastName'); 
    this.person = person; 

    this.person = ko.observable(person.firstName); 
    this.person = ko.observable(person.lastName); 
};

它應該是：

var ViewModel = function() { 

    var person = new Person('MyName', 'MyLastName'); 
    this.person = person; 

    this.person.firstName = ko.observable(person.firstName); 
    this.person.lastName = ko.observable(person.lastName); 
};

我沒有告訴應該改變人的功能屬性。

來源

2017-04-11 14:53:02 Nickso

淘汰賽/打字稿ko.observables使用對象

回答

相關問題