總JavaScript的小白在這裏...有三個文件：淘汰賽，RoomModel和RoomViewModel如何從視圖模型引用模型類型？

RoomModel

function RoomModel(name) { 
    var self = this; 
    self.name = name; 
}

RoomViewModel

function RoomViewModel(roomModel) { 
    var self = this; 
    self.Name = ko.observable(roomModel.Name).toLowerCase(); 
}

如何RoomViewModel知道RoomModel是什麼？

我把它們放在一起的觀點，但不知道這是否是正確的要麼...

<body> 
<script src="Models/RoomModel.js"></script> 
<script src="ViewModels/RoomViewModel.js"></script> 
<script type='text/javascript' src='/Scripts/knockout-3.4.0.js'> 
    var roomViewModel = new RoomViewModel(new RoomModel('Hello World')); 
    ko.applyBindings(roomViewModel); 
</script> 
</body>

來源

2015-12-13 O.O

JavaScript沒有一個靜態類型系統。相反，它有助於將JS視爲具有Duck Typing：「如果變量像鴨子一樣走路，像鴨子一樣跳躍，它肯定是一隻鴨子。」

在你的問題的光：

如何RoomViewModel知道RoomModel是什麼？

那麼答案將是：如果爲RoomViewModel構造函數的輸入變量具有Name屬性，它也可能被視爲一個有效的RoomModel。

換句話說，查看模型不需要需要知道輸入是一個有效的RoomModel。這取決於來電者。至於視圖模型的構造函數，這是同樣好：

var roomViewModel = new RoomViewModel({ Name: 'Hello World' });

而且在某種意義上：它是。

作爲一個註腳，如果你感到不安通過這個系統，你可以看看打字稿。它爲JavaScript添加了更多的靜態類型特徵，允許您將輸入參數的類型鎖定到特定的構造函數funciton（Typescript術語中的「class」）或者一個接口（它允許您保留一些鴨子打字特徵）。

來源

2015-12-13 11:47:50 Jeroen

我想在這裏把MVVM的簡單vesion在下面的步驟。

創建模型。在我們的例子中，它是roomModel。爲了使它具有互動性，我已將其標記爲可觀察的。
創建的模型即roomModelObject所以用新的關鍵字生成實例。
創建視圖模型，我再次使用pureComputed對剛認識的目的。
最後創建視圖模型的新對象，並通過ko.applybinding

同樣的事情可以用不同的方式來實現，以及與視圖結合它。

//1. Data Model 
 
var roomModel = function RoomModel(name) { 
 
    var self = this; 
 
    self.firstName = ko.observable(name); 
 
} 
 

 
//2. Create Instance of Model 
 
var roomModelObject = new roomModel("O.o"); 
 

 
//3. Here's my data model 
 
var ViewModel = function() { 
 
    
 
    
 
    this.fullName = ko.pureComputed(function() { 
 
     return roomModelObject.firstName() + "- Computed"; 
 
    }, this); 
 
}; 
 

 
// 4. binding 
 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<p>First name: <input data-bind="value: roomModelObject.firstName" /></p> 
 

 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

來源

2015-12-13 05:15:47 Dnyanesh

在viewModel之外創建'roomModel'的實例並在viewModel函數內部訪問它err！不是一個好的，這裏很難做到。 #instance共享。 –

@supercool感謝分享。試圖簡單化。 roomModel實例不會給錯誤檢查片斷。 – Dnyanesh

是的，它完全好，它不會給任何錯誤，但我指着更大的圖片。所有我擔心的是OP可能會創建像'u'指向'（2）'的外部實例，如果app'n變得更大，這會導致不良結果。它總是更好地在viewModel裏面移動第2步使具體實例vm。乾杯 –

如何從視圖模型引用模型類型？

RoomModel

RoomViewModel

回答

相關問題