在前端开发中，使用 MVC 模式来组织代码是一种常见的做法。can-view-model 就是一个优秀的实践，能够帮助我们在前端开发中更好地遵循 MVC 模式。
can-view-model 是 CanJS 中的一个组件，它是一个双向数据绑定的工具。在 CanJS 中，视图模型模式是通过can.Component来实现的，并且使用了 can-view-model 进行双向绑定。
安装 can-view-model 包
can-view-model 可以使用 npm 包管理工具进行安装。在终端中输入以下命令：
--- ------- --------------
使用 can-view-model
can-view-model 是 CanJS 的一部分，所以我们要在 HTML 文件中引入 can 和 can-view-model。在<head>中添加以下代码：
------- ------------------------------ ------- -----------------------------------------
接下来，我们可以使用can.Component来创建组件，并在组件中使用 can-view-model 进行数据绑定。以下是一个简单的例子：
-----------------------------
--------
----------------------
---- ---------------
---------- -
----- ------
---- --
--
--------- ----------------- ---------------------------- ---------------------------
---
---------在上面的例子中，我们定义了一个叫做my-component的组件，它有两个属性：name和age。在模板中，我们使用can-value指令来进行数据绑定。这里的can-value指令使得输入框中的内容可以和属性name和age进行双向绑定。
那么当我们在输入框中输入内容时，属性值也会及时更新。
深入学习 can-view-model
can-view-model 提供了一些其他的指令，可以更好地帮助我们进行数据绑定。
can-value
can-value 指令已经在上面的例子中进行了介绍。它是用来实现双向数据绑定的指令。在使用 can-value 指令时，我们需要指定某个属性，如下所示：
------ ---------------- --
当我们改变输入框中的内容时，属性 name 的值就会自动更新。
can-enter
can-enter 指令用来捕获用户敲击Enter键时的事件。在用户在输入框中输入完内容后，我们可以使用 can-enter 来捕获用户按下 Enter 键事件，进而触发我们指定的函数。
------ ---------------- --
在这个例子中，用户在输入框中敲击 Enter 键时，会触发 save 函数。
can-submit
can-submit 指令和 can-enter 的作用类似，只不过它是用来捕获表单提交事件的。
----- ------------------ ------ ----------- -- -------
在这个例子中，当用户提交表单时，save 函数就会被调用。
can-click
can-click 指令用来捕获用户点击事件，这个指令和 jQuery 中的 click 方法类似。
------- ------------------------------
在这个例子中，当用户点击按钮时，save 函数就会被调用。
以上是 can-view-model 常用的指令，如果读者还想深入学习 can-view-model，可以查看 CanJS 的官方文档。
总结
can-view-model 是 CanJS 中非常重要的一个组件，它帮助我们实现了数据绑定，使得我们的代码更加优雅干净。在使用 can-view-model 时，我们需要加深对 CanJS 的理解，并且对 MV* 的概念要有更加深入的掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb8f7b5cbfe1ea061186e