快捷導(dǎo)航

knockoutjs動(dòng)態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實(shí)現(xiàn)方法

更新時(shí)間：2016年09月01日 09:35:50 作者：一線碼農(nóng)

Knockoutjs 的Components 是一種自定義的組件，它以一種強(qiáng)大、簡(jiǎn)介的方式將你自己的ui代碼組織成一種單獨(dú)的、可重用的模塊。接下來通過本文給大家介紹knockoutjs動(dòng)態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實(shí)現(xiàn)方法，一起看看吧

玩過knockoutjs的都知道，有一個(gè)強(qiáng)大的功能叫做component，而這個(gè)component有個(gè)牛逼的地方就是擁有自己的viewmodel和template，比如下面這樣：

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

很顯然，viewmodel就是function函數(shù)區(qū)，而template就是模板區(qū)，然后通過register函數(shù)將component注冊(cè)到knockout中，下面我們演示一個(gè)簡(jiǎn)單的功能，就是動(dòng)態(tài)的顯示當(dāng)前“input”內(nèi)容的length長(zhǎng)度。

<!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>

請(qǐng)仔細(xì)看一下這段代碼，當(dāng)前的component會(huì)將template模板inject到html的div的標(biāo)簽中，而且這個(gè)template標(biāo)記中還有一個(gè)text元素的綁定，而這個(gè)(text().length)的數(shù)據(jù)源剛好就是viewModel中的this.text．．對(duì)吧。。。有了這兩個(gè)的合一，我們最后的html展示如下：

接下來我們隨便輸入一些數(shù)字，移開鼠標(biāo)，這個(gè)時(shí)候會(huì)觸發(fā)input的change事件，比如下面這樣。

是不是好吊？？？當(dāng)然有些人可能要問，如果在input呈現(xiàn)的時(shí)候賦予一點(diǎn)默認(rèn)值呢？？？可不可以呢？當(dāng)然也是可以的，這個(gè)時(shí)候我們可以在data-bind中默認(rèn)賦予值就ok啦。。。比如下面這樣：

<body>
<h4>Second instance, passing parameters</h4>
<div data-bind='component: { name: "message-editor", params: { initialText: "Hello, world!" }}'></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>

可以看到，上面的代碼中我通過在component中的params對(duì)象中加入一個(gè)initialText屬性，這個(gè)時(shí)候就可以將這個(gè)initialText動(dòng)態(tài)的注入到我們的viewModel中，然后我們的input和span元素通過data-bind 訂閱了這個(gè)viewModel中的this.text監(jiān)控屬性，這個(gè)時(shí)候就出現(xiàn)了實(shí)時(shí)更新操作了，迫不及待的看一下吧~

一：?jiǎn)栴}分析

好了，通過上面的演示，你或許發(fā)現(xiàn)到了如下兩個(gè)問題，第一個(gè)問題就是好強(qiáng)大，只要你register就可以了，根本不需要通過applyBindings來施加一個(gè)viewmodel，這樣就實(shí)現(xiàn)了頁(yè)面的模塊化，真的好便捷~ 所以這個(gè)問題是一個(gè)好事情，第二個(gè)問題就是我們的template模板中的內(nèi)容是通過“硬編碼“的形式，也就是如果這個(gè)內(nèi)容有很多，比如有100行，200行，那我們是不是瘋了？？？就是你能耐再大也沒法一一拼接起來，就算拼起來，維護(hù)成本也太大了，所以問題來了，如何將template的content動(dòng)態(tài)化？？？比如現(xiàn)實(shí)中我們看到的百度文庫(kù) 的頁(yè)面。。。如下圖：

這個(gè)頁(yè)面中，有很多的模塊，比如我圈出來的上面3個(gè)，這三個(gè)模塊中的html肯定還是很多的吧~~~

二：template動(dòng)態(tài)獲取

　　html內(nèi)容的動(dòng)態(tài)獲取，通常有兩種方式，第一種就是RequireJs，當(dāng)然你需要引用這么一個(gè)js，第二種就是我們重寫他們的模板，當(dāng)然這篇我們講解后面的這種方式，我們要做的就是重寫component中的loadTemplate函數(shù)，然后替換默認(rèn)的defaultLoader加載器，是不是很簡(jiǎn)單呢？？？

1. 重寫loadtemplate方法

//第一步：重寫loadTemplate方法
var templateFromUrlLoader = {
loadTemplate: function(name, templateConfig, callback) {
if (templateConfig.fromUrl) {
var fullUrl = '/' + templateConfig.fromUrl
//ajax動(dòng)態(tài)獲取外部的file內(nèi)容
$.get(fullUrl, function(markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};
//替換原來的defaultLoader，實(shí)現(xiàn)新的templateFromUrlLoader
ko.components.loaders.unshift(templateFromUrlLoader);

2. 將hard codeing 放入到外部的file，比如我新建了一個(gè)file.html文件。

3. 再register組件，然后在template標(biāo)記上引用外面文件路徑，比如下面的{ fromUrl: 'file.html' }

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

好了，所有功能都準(zhǔn)備完畢了，我們?yōu)g覽一下頁(yè)面，看看是啥樣的？？？

終于大功搞成了，對(duì)不對(duì)撒~~~然后是不是就可以延伸到上面介紹的“百度文庫(kù)”的例子，我們可以把各個(gè)模塊的html放到一個(gè)單獨(dú)的文件中.

<!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動(dòng)態(tài)獲取外部的file內(nèi)容
$.get(fullUrl, function (markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};
//替換原來的defaultLoader，實(shí)現(xiàn)新的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>

以上所述是小編給大家介紹的knockoutjs動(dòng)態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: