玩过knockoutjs的人都知道有一个强大的函数叫做component，这个组件有自己的viewmodel和模板，比如下面这个：

ko.components . register(' message-editor '，{viewModel: function(){}，template : ' ' })；很明显，viewmodel是功能区，template是模板区，然后通过register函数将组件注册为敲除。现在我们演示一个简单的函数，它是动态显示当前“输入”内容的长度。

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title/title meta charset=' utf-8 '/script src=' http : jquery-1 . 8 . 2 . js '/script script src=' http : knockoutjs . js '/script/headsdydiv data-bind=' component : ' message-editor ' '/div script type=' text/JavaScript ' ko.components . register(' message-editor '，{ viewmodel 3360 function(params}，template: 'Message:输入数据-绑定='value: text' /' '(长度： span数据-绑定='text: text()。长度'/span)' })；ko . applybindings()；/script/body/html请仔细看看这段代码。当前组件会将模板注入到html的div标签中，并且在这个模板标签中还有一个text元素的绑定，以及这个(text()的数据源。长度)恰好是这样的.在视图模型中，对吗？通过这两者的集成，我们最终的html显示如下：

接下来，让我们输入一些数字并移动鼠标。此时，将触发输入的变更事件，如下所示。

容易挂吗？当然，有人可能会问，如果在渲染输入的时候给一点默认值呢？有可能吗？当然，没关系。此时，我们可以默认在数据绑定中给出一个值。例如，以下内容：

body H4第二个实例，传递参数/H4 div data-bind=' component : { name : ' message-editor '，params 3360 { initialtext : ' Hello，world！} } '/div script type=' text/JavaScript ' ko.components . register(' message-editor '，{ viewmodel : function(params){ this . text=ko . observatory(params params . initialtext | | ' ')；}，template: 'Message:输入数据-绑定='value: text' /' '(长度： span数据-绑定='text: text()。长度'/span)' })；ko . applybindings()；/script/body如您所见，在上面的代码中，我可以通过向组件中的params对象添加initialText属性来动态地将这个initialText注入到我们的viewModel中，然后我们的输入和span元素通过数据绑定订阅这个viewModel中的this.text monitoring属性。这时，有一个实时更新操作。迫不及待想看~

1.问题分析

好了，通过上面的演示，你可能会发现以下两个问题。第一个问题就是它这么强大，只要注册了，完全不需要通过applyBindings应用一个viewmodel，从而实现了页面的模块化，真的很方便~所以这个问题是好事。第二个问题是我们的模板模板中的内容是“硬编码”的形式，也就是如果有很多内容，比如，即使不能一个一个再拼接，即使放在一起，维护成本也太高，那么问题来了，如何让模板的内容动态化？比如我们在现实中看到的百度文库的页面。下图：

这个页面有很多模块，比如上面我圈出来的三个。这三个模块里面肯定有很多html ~ ~ ~

二：模板动态获取

超文本标记语言内容的动态获取，通常有两种方式，第一种就是要求j，当然你需要引用这么一个js，第二种就是我们重写他们的模板，当然这篇我们讲解后面的这种方式，我们要做的就是重写成分中的loadTemplate函数，然后替换默认的默认加载程序加载器，是不是很简单呢？

1.重写加载模板方法

//第一步：重写loadTemplate方法var templatefrourlloader={ load template :函数（名称、模板配置、回调){if(模板配置。来自网址){ var完整网址='/' templateConfig.fromUrl//ajax动态获取外部的文件内容$.get(fullUrl)，function(markupString){ ko。组件。DefaultLoader。LoadTemplate(名称、标记字符串、回调)；});} else { callback(null)；}}};//替换原来的默认加载程序，实现新的templatefrourlloaderko。组件。装载机。unshift(templefrourloader)；2.将硬编码放入到外部的文件，比如我新建了一个file.html文件。

3.再注册组件，然后在模板标记上引用外面文件路径，比如下面的{ fromUrl: 'file.html' }

柯。组件。注册('消息编辑器'，{ view model : function(params){ this。text=ko。天文台(参数参数。initial text | | ' ')；}，模板： { Fromurl : '文件。html ' }，})；好了，所有功能都准备完毕了，我们浏览一下页面，看看是啥样的？

终于大功搞成了，对不对撒~~~然后是不是就可以延伸到上面介绍的"百度文库"的例子，我们可以把各个模块的超文本标记语言放到一个单独的文件中。

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '/title/title meta charset=' utf-8 '/script src=' http : jquery-1。8 .2 .js '/script script src=' http : knockout js。js '/script/headdydiv data-bind='组件： { name : '消息编辑器'，params: { initialText: '你好撒！} } '/div脚本类型=' text/JavaScript '//第一步：重写loadTemplate方法var templatefrourlloader={ load template :函数（名称、模板配置、回调){if(模板配置。来自网址){ var完整网址='/' templateConfig.fromUrl//ajax动态获取外部的文件内容$.get(fullUrl)，function(markupString){ ko。组件。DefaultLoader。LoadTemplate(名称、标记字符串、回调)；});} else { callback(null)；}}};//替换原来的默认加载程序，实现新的templatefrourlloaderko。组件。装载机。unshift(templefrourloader)；柯。组件。注册('消息编辑器'，{ view model : function(params){ this。text=ko。天文台(参数参数。initial text | | ' ')；}，模板： { Fromurl : '文件。html ' }，})；柯。applybindings()；/脚本/正文/html以上所述是小编给大家介绍的击倒对手动态加载外部的文件作为成分中的模板数据源的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！