您的位置：首页 > Web前端 > JavaScript

knockoutjs如何动态加载外部的file作为component中的template数据源

2016-08-31 18:29 477 查看

　　玩过knockoutjs的都知道，有一个强大的功能叫做component，而这个component有个牛逼的地方就是拥有自己的viewmodel和template，

比如下面这样：

ko.components.register('message-editor', {
viewModel: function(){},
template:""
});

很显然，viewmodel就是function函数区，而template就是模板区，然后通过register函数将component注册到knockout中，下面我们演示一个简单

的功能，就是动态的显示当前“input”内容的length长度。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.8.2.js"></script>
<script src="knockoutjs.js"></script>
</head>
<body>
<div data-bind='component: "message-editor"'></div>

<script type="text/javascript">

ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: 'Message: <input data-bind="value: text" /> '
+ '(length: <span data-bind="text: text().length"></span>)'
});

ko.applyBindings();
</script>

</body>
</html>

请仔细看一下这段代码，当前的component会将template模板inject到html的div的标签中，而且这个template标记中还有一个text元素的绑定，

而这个(text().length)的数据源刚好就是viewModel中的this.text．．对吧。。。有了这两个的合一，我们最后的html展示如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="jquery-1.8.2.js"></script>
<script src="knockoutjs.js"></script>
</head>
<body>
<div data-bind='component: { name: "message-editor", params: { initialText: "你好撒！！！" }}'></div>

<script type="text/javascript">

//第一步：重写loadTemplate方法
var templateFromUrlLoader = {
loadTemplate: function (name, templateConfig, callback) {
if (templateConfig.fromUrl) {
var fullUrl = '/' + templateConfig.fromUrl

//ajax动态获取外部的file内容
$.get(fullUrl, function (markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};

//替换原来的defaultLoader，实现新的templateFromUrlLoader
ko.components.loaders.unshift(templateFromUrlLoader);

ko.components.register('message-editor', {
viewModel: function (params) {
this.text = ko.observable(params && params.initialText || '');
},
template: { fromUrl: 'file.html' },
});

ko.applyBindings();
</script>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航