RoomModel

Question

这里总javascript noob ...有三个文件：knockout，RoomModel和RoomViewModel

RoomModel

{{ index .Posts 0 $.ThreadName}}

RoomViewModel

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

function RoomViewModel(roomModel) { var self = this; self.Name = ko.observable(roomModel.Name).toLowerCase(); }如何知道RoomViewModel是什么？

我把它们放在视图中，但不确定这是否正确......

RoomModel

Answer 1

我正在尝试在下面的步骤中放入最简单的MVVM。

创建模型。在我们的例子中，它是roomModel。我已经将它标记为可观察的，只是为了使它具有交互性。
创建Model的实例，即roomModelObject，以便使用new关键字创建。
创建ViewModel，我再次使用pureComputed只是为了理解目的。
最后创建ViewModel的新对象并通过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>

Answer 2

JavaScript没有静态类型系统。相反，它有助于将JS视为Duck Typing：“如果变量像鸭子一样行走，像鸭子一样呱呱叫，它必定是鸭子。”

根据你的问题：

RoomViewModel如何知道RoomModel是什么？

然后答案是：如果RoomViewModel构造函数的输入变量具有Name属性，则它也可以被视为有效RoomModel。

换句话说，视图模型不需要知道输入是有效的RoomModel。这取决于来电者。就View Model构造函数而言，这同样很好：

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

从某种意义上说：确实如此。

作为脚注，如果您对此系统感到不安，可以查看TypeScript。它为JavaScript增加了一些静态类型功能，允许您将输入参数的类型锁定到特定的构造函数函数（Typescript术语中的“类”），或者锁定到接口（允许您保留一些鸭子类型）的功能）。

如何从视图模型中引用模型类型？

RoomModel

RoomViewModel

2 个答案: