📌  相关文章
📜  KnockoutJS-模板

📅  最后修改于: 2020-10-23 07:38:18             🧑  作者: Mango

模板是一组DOM元素，可以重复使用。模板具有减少DOM元素重复的特性，因此使构建复杂的应用程序变得容易。

有两种创建模板的方法。

  • 本机模板-此方法支持控制流绑定，例如foreach，with和if。这些绑定捕获元素中存在的HTML标记，并将其用作随机项目的模板。此模板不需要外部库。

  • 基于字符串的模板-KO连接到第三方引擎以将ViewModel值传递到其中，并将结果标记注入到文档中。例如，JQuery.tmpl和Underscore Engine。

句法

template:

请注意，在脚本块中以text / html形式提供类型以通知KO，它不是可执行块，而只是需要呈现的模板块。

参量

可以将以下属性的组合作为参数值发送到模板。

  • 名称-这代表模板的名称。

  • 节点-这表示要用作模板的DOM节点数组。如果传递了名称参数，则将忽略此参数。

  • 数据-这只是要通过模板显示的数据。

  • if −如果给定条件产生true或true值，则将提供模板。

  • foreach-以foreach格式提供模板。

  • 因为-这是刚刚创造的foreach元素的别名。

  • afterAdd，afterRender，beforeRemove-这些全部表示要执行的可调用函数，具体取决于执行的操作。

观察结果

渲染命名模板

与控制流绑定一起使用时，模板由DOM中的HTML标记隐式定义。但是，如果需要，可以将模板分解为一个单独的元素，然后按名称引用它们。

例

现场演示
KnockoutJS Templating - Named Template
      
   

   
      
Friends List

      Here are the Friends from your contact page:

输出

让我们执行以下步骤，看看上面的代码如何工作-

  • 将以上代码保存在template-named.htm文件中。

  • 在浏览器中打开此HTML文件。

  • 在这里，朋友模板使用了2次。

在模板中使用“ foreach”

以下是将foreach参数与模板名称一起使用的示例。

例

现场演示
KnockoutJS Templating - foreach used with Template
      
   

   
      
Friends List

      Here are the Friends from your contact page:

输出

让我们执行以下步骤，看看上面的代码如何工作-

  • 将以上代码保存在template-foreach.htm文件中。

  • 在浏览器中打开此HTML文件。

  • 这里，在模板绑定中使用了foreach控件。

为foreach项目创建别名用作关键字

以下是如何为foreach项目创建别名-

通过创建别名，可以轻松地从foreach循环内部引用父对象。当代码复杂且嵌套在多个级别时，此功能很有用。

例

现场演示
KnockoutJS Templating - using alias in Template
      
   

   
      
Friends List

      Here are the Friends from your contact page:

    输出

    让我们执行以下步骤，看看上面的代码如何工作-

    • 将以上代码保存在template-as-alias.htm文件中。

    • 在浏览器中打开此HTML文件。

    • 使用别名代替数组的全名。

    使用afterAdd，beforeRemove和afterRender

    在某些情况下，需要在模板创建的DOM元素上运行额外的自定义逻辑。在这种情况下，可以使用以下回调。考虑您正在使用foreach元素，然后-

    afterAdd-将新项目添加到foreach中提到的数组时，将调用此函数。

    beforeRemove-在从foreach中提到的数组中删除项目之前，将调用此函数。

    afterRender-每次渲染foreach并将新条目添加到数组时，都会调用此处提到的函数。

    例

    现场演示
    KnockoutJS Templating - Use of afterRender Template
      
      
   

   
      
    Friends List
    
      Here are the Friends from your contact page:

    输出

    让我们执行以下步骤，看看上面的代码如何工作-

    • 将以上代码保存在template-afterrender.htm文件中。

    • 在浏览器中打开此HTML文件。

    • 在这里，每次渲染foreach时都会执行afterProcess函数。

    动态选择模板

    如果有多个可用模板，则可以通过将名称设为可观察参数来动态选择一个。因此，随着name参数的更改，将重新评估模板值，然后将重新呈现数据。

    例

    现场演示
    KnockoutJS Templating - Dynamic Template
      
   
   
   
      
    Friends List
    
      Here are the Friends from your contact page:

    输出

    让我们执行以下步骤，看看上面的代码如何工作-

    • 将以上代码保存在template-dynamic.htm文件中。

    • 在浏览器中打开此HTML文件。

    • 根据有效标志值确定要使用的模板。

    使用基于外部字符串的引擎

    本机模板可与各种控制流元素完美配合，即使使用嵌套的代码块也是如此。 KO还提供了与外部模板库（例如Underscore模板引擎或JQuery.tmpl）集成的方法。

    正如官方网站上所提到的，自2011年12月以来，不再积极开发JQuery.tmpl。因此，仅建议使用KO的本机模板，而不是JQuery.tmpl或任何其他基于字符串的模板引擎。

    有关更多详细信息，请参考官方网站。