KnockoutJs和ASP.NET MVC3動態模板

我有一個相當大的ASP.NET MVC Web應用程序，它廣泛地使用KnockoutJS。多年來，我爲應用程序創建了許多模板，但它們都使用命名腳本標籤駐留在各種網頁中。在各種觀點上管理他們幾乎變得無法忍受。我想找出一種方法將這些模板合併到他們自己的html文件中，以便它們更易於管理。KnockoutJs和ASP.NET MVC3動態模板

我想知道是否有任何圖書館支持這個概念？我不想重蹈覆轍，因爲我確信有人已經遇到過這個問題並解決了它。這裏是我正在處理的一個快速概述...

基本上，我有很多內容類似於下面的標記。

[[ HOME/INDEX.CSHTML ]] 

<h1>Customers</h1> 
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div> 

<h1>Products</h1> 
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div> 

<script type="text/html" id="personTmpl"> 
    Name: <span data-bind="text: name" /> 
    Address: <span data-bind="text: address" /> 
</script> 

<script type="text/html" id="productTmpl"> 
    Description: <span data-bind="text: description" /> 
    Category: <span data-bind="text: category" /> 
</script> 

<script type="text/javascript"> 
    $(function(){ 
    var json = { 
     customers: [ { name: 'Joe', address: 'Denver, CO' } ], 
     products: [ { name: 'Skis', category: 'Outdoors' } ] 
    }; 
    var vm = new CustomViewModel(json); 
    ko.applyBindings(vm); 
    }); 
</script> 

[[ END HOME/INDEX.CSHTML ]]

我倒是喜歡向做的是保存在自己的HTML文件中personTmpl和productTmpl和他們拉入的觀點：我已經在同一頁面定義爲我的實際內容標記我的模板公告如所須。這將允許我只有我的cshtml文件中的內容標記。此外，它可以使我從任何地方使用模板（即Customers \ Index，Products \ Show，Home \ Index等）。

我認爲它會在每個頁面上需要一些自定義js，但我認爲這是一個小的代價來清理混亂，並使我的模板可用於所有視圖。我可以使用每個頁面或類似這樣的事情在某些服務器端代碼（僅僅是一個例子）見我

@section templates { 
    @Content.Template("Person.tmpl", Url) 
    @Content.Template("Product.tmpl", Url) 
} 

<h1>Customers</h1> 
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div> 

<h1>Products</h1> 
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div> 

<script type="text/javascript"> 
    $(function(){ 
    var json = @Html.Raw(Json.Encode(ViewBag.PageData))); 
    var vm = new CustomViewModel(json); 
    ko.applyBindings(vm); 
    }); 
</script>

有了它們存儲到自己的模板，我甚至可以動態查詢的內容使用舊的工具提示和對話時尚$.get('/tmpl/Person.tmpl', renderFunc)。

同樣，我不介意創建自己的實現，但我確信已經有一個解決方案。任何人？

在此先感謝！

來源

2012-09-27 Luc

我的建議是看外部模板引擎的位置：https://github.com/ifandelse/Knockout.js-External-Template-Engine

它可以讓你把你的模板在外部文件中，您只需綁定，你通常會使用name參數引用它們，和用途一些約定或配置來確定找到模板文件的確切路徑。

外部模板引擎是一個非常強大的解決方案。爲了達到這個目的，我最近還使用了require.js和text插件。更多的信息在這個答案：knockout.js loading templates at runtime

如果你想要呈現他們內聯，那麼我想一個輔助函數可以加載文件，並將其包裝在一個非JS類型的腳本標記。

來源

2012-09-27 04:48:11

Ryan - 這正是*我正在尋找的東西！謝謝！ +1 – Luc

KnockoutJs和ASP.NET MVC3動態模板

回答

相關問題