简介
can-stache-bindings 是一个可以在 CanJS 应用中使用的基于模板绑定的工具包。它用于将模板绑定到 JavaScript 数据模型中，并提供了一些额外的工具，例如过滤器、计算属性等，可以在模板中使用。
安装
可以使用 npm 安装 can-stache-bindings，输入以下命令：
npm install can-stache-bindings --save
使用
引入模块
在应用程序中使用 can-stache-bindings 首先需要引入模块，可以使用以下代码：
import stache from "can-stache"; import canStacheBindings from "can-stache-bindings"; //将 stache 模块设置为默认模板引擎 canStacheBindings.behaviors.stache = stache;
创建模板
在页面中创建一个模板，可以使用以下代码：
<div>{{ helloWorld }}</div>注：helloWorld 将来将通过数据模型传递给模板。
绑定模板
可以使用 can-stache-bindings 绑定模板，以下代码演示了如何将数据模型传递到 helloWorld 变量中：
-- -------------------- ---- ------- ------ ----------------- ---- ---------------------- ----- ---- - - ----------- ------ ------ -- ----- -------- - -------- ---------- ---------- ----- ------------- - ---------------------------------- -----------------------------------------
此时，你会发现一个显示着"Hello World"的div被加入了页面中。
使用过滤器
can-stache-bindings 还提供了过滤器，以下代码演示了如何使用 toUpperCase 过滤器：
<div>{{ name | toUpperCase }}</div>-- -------------------- ---- ------- ------ ----------------- ---- ---------------------- ----- ---- - - ----- ----- ---- -- ------------------------------------- - --------------- - ------ -------------------- -- ----- -------- - -------- ---- - ----------- ---------- ----- ------------- - ---------------------------------- -----------------------------------------
现在你的页面已经显示着"JOHN DOE"了。
使用计算属性
计算属性是一种根据其他属性的值动态计算新的属性值的方法。以下代码演示了如何使用计算属性：
<div>{{ firstName }} {{ lastName }}</div>-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ---- - -
---------- -------
--------- -----
--
--------------------------- ----------- -
---- ---------- -
------ -------------- - - - - --------------
--
----------- -----
------------- ----
---
----- -------- - -------- -------- ----------
----- ------------- - ----------------------------------
-----------------------------------------现在你的页面已经显示着"John Doe"了。
总结
can-stache-bindings 是 CanJS 应用中一个强大的模板绑定工具包，通过本文介绍的方法，你可以学会如何使用它来增强你的应用程序。可以先从简单的数据绑定开始，通过学习过滤器和计算属性来处理更复杂的任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb8f7b5cbfe1ea061186d