访问 Javascript Html 模板并使用 Knockout.js 绑定数据

Posted

技术标签:

【中文标题】访问 Javascript Html 模板并使用 Knockout.js 绑定数据【英文标题】:Access Javascript Html Template and Bind Data With Knockout.js 【发布时间】:2013-01-13 20:44:53 【问题描述】:

如何访问在整个站点中重复使用的 javascript 模板,并在 javascript 中执行此操作并将对象绑定到它。我想以字符串形式访问模板,以便可以将其添加到 Google 地图信息窗口下方的内容属性中。

我知道ko.renderTemplate("myTemplate", accessor, , element, 'replaceNode'); 有这个函数,但我怎样才能让它返回字符串来拍摄到信息窗口?

<script type="text/html" id="info-window-test">

   <span data-bind="text: Name"></span>

</script>

   var html = TODO: Get Template With Data

  /***************** OLD WAY
    var html = '<div class="info-window">';

        html = html + '<div><b>' + location.City + ', ' + location.StateRegion + '</b></div><hr/>';

        length = location.Events.length;

        $.each(location.Events, function (index, item) 
            html = html + '<div><a target="_blank" href="' + item.Link + '">' + item.Name + '</a></div>';
            html = html + '<div><i>' + item.DateFormatted + '</i></div>';

            if (index < length - 1) 
                html = html + '<hr/>';
            
        );

        html = html + '</div>';
    **************************/

    var infoWindow = new google.maps.InfoWindow(
       content: html
    );

【问题讨论】:

您能详细说明一下吗?我不太明白这个问题。小提琴会有所帮助 如果我知道实际的实现,小提琴会有所帮助。我想做一些类似 $.template('info-window-test', data) 的事情并返回它的字符串,但是用 knockout.js 做它而不引用 jquery 模板来这样做。这可能吗? 【参考方案1】:

如果我正确理解了您的问题,应该是“我可以使用 KnockoutJS 作为简单的模板引擎吗?”,简单的答案是不,您不能

但是你可以暂时使用 DOM 来实现你想要的。

检查这个 jsfiddle http://jsfiddle.net/angelyordanov/zQZT8/。

<script type="text/html" id="info-window-test">  
  <span data-bind="text: Name"></span>  
</script>  
var viewModel =  Name: 'John' ;

var templatePlaceholder = 
  $('<div style="display: none" data-bind="template:  name: \'info-window-test\' "></div>')
  .appendTo('body');

ko.applyBindings(viewModel, templatePlaceholder[0]);

var resultHtml = templatePlaceholder.html();

ko.cleanNode(templatePlaceholder[0]);
templatePlaceholder.remove();

alert(resultHtml);

【讨论】:

以上是关于访问 Javascript Html 模板并使用 Knockout.js 绑定数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Django模板在javascript中访问ajax jquery中的模板变量

Thymeleaf 内联 javascript spring bean 使用文本模板模式检查 null

Django 模板变量和 Javascript

Django 模板变量和 Javascript

Django 模板变量和 Javascript

Django 模板变量和 Javascript