在KnockoutJS中动态更换模板

617035918 发布于2019-08-20 18:10 / 1288人阅读

摘要：在中动态更换模板本文来源由赤石俊哉翻译整理。当我们开始基于在数组中的每一个项目所关联的事实变换模板的时候，事情就变得又去了。我们的绑定就像这样了现在，这个文章可以动态地显示，以及根据情况显示。

在KnockoutJS中动态更换模板

NOTE:
本文来源 Dynamically Changing Templates in KnockoutJS - Knock Me Out
由 赤石俊哉 翻译整理。

在KnockoutJS的1.12版本之后新增了一个很有趣也很有用的特性，那就是可以为template绑定的模板名称传递一个函数。这样的话，就方便了：

允许你基于你的视图模型状态来动态渲染一个部分

在一个foreach条件里面，允许你使用不同的模板渲染数组中的每个独立的项目。

让你在不需要过多在意条件逻辑的情况下，使每种情况的模板简短且可复用。

举一个简单的场景来说，你可能希望一个用户可以在摘要和详细两种显示文章的方式之间切换。
我们的视图模型可以是这样的：

var viewModel = {
    articles: [{
        id: 1,
        title: "Article One",
        content: "Content for article one."},
    {
        id: 2,
        title: "Article Two",
        content: "Content for article two."},
    {
        id: 3,
        title: "Article Three",
        content: "Content for article three."}
                                               ],
    selectedView: ko.observable("summary"),
    selectedArticle: ko.observable()
};

在我们的数据绑定中，我们设置selectedView为可观测的，并且是基于一些单选框的。模板的名字指定不再是一个字符串，而是可以用selectedView来绑定的。
Note: 我们返回一个匿名函数，因为直接为一个可观测的变量设置的绑定，只会在我们不给这个模板绑定传递选项作为对象遍历的时候才生效。我们必须要将foreach或者data传递给这个绑定。

Summary
Details

现在，我们可以简单的在summary和details两个模式之间切换了。通常来说，在我们可以使用一个拥有条件逻辑的模板为每一个视图之前，我们需要使用visible绑定来隐藏一个或者多个。
当我们开始基于在数组中的每一个项目所关联的事实变换模板的时候，事情就变得又去了。有可能我们还会加入一个edit模式用一个可观测的变量来跟踪选择的文章。
然后，我们的逻辑可能会变得越来越复杂，让我们添加一个用来判断该使用哪个模板的方法吧。

viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
    return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);

注意，这个方法使用数据项目作为第一个参数。Knockout从foreach的循环中向这个方法传递当前的项目。我们的绑定就像这样了：

现在，这个文章可以动态地显示summary，detail以及根据情况显示edit。

GPU云服务器云服务器 php动态网站模板 KnockoutJS js中怎么更换图片 knockoutjs绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84155.html

HTML编码规范

摘要：当然我们还可以引入框架，这些框架一般都自带模板处理引擎，比如等语义化命名和语义化标签我们尽量多采用语义化来命名，并且采用语义化标签来书写代码，多用中新增的标签来书写。 1.黄金法则（Golden rule）不管有多少人参与同一个项目，一定要确保每一行代码都像是同一个人编写的。 Every line of code should appear to be written by a si...

nifhlheimr 2019-08-01 14:50 评论0 收藏0
Regularjs是什么

摘要：目前已经在大大小小多个线上产品中使用了，也收集了一些有效的建议好了，该看下一个最简单的组件长什么样吧免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者郑海波授权网易云社区发布。此文摘自regularjs的指南，目前指南正在全面更新，把老文档的【接口/语法部分】统一放到了独立的 Reference...

seal_de 2019-06-28 11:09 评论0 收藏0
强不强？能在多种前端框架下使用的表格控件

摘要：近几年前端框架特别流行，比如等。有没有能够在多种前端控件下都能使用的表格控件还真有中的，能支持很多主流的框架。在纯下使用文件引入的文件和样式引入和文件。获得控件，并进行数据绑定。近几年 Web 前端框架特别流行，比如 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS 等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能...

沈俭 2019-08-01 16:19 评论0 收藏0
Web技术的前世今生（三）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一，以及技术的前世今生二前面我提过，我的大哥有一个叫的死党，这家伙有事没事经常上我们家串门。时间来到了年，在那前后发生了两件事让我印象深刻。传送门技术的前世今生一技术的前世今生二前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》，以及《Web技术的前世今生（二）》前面我提过，我的大哥HTML...

Wuv1Up 2019-07-01 11:06 评论0 收藏0