2

サイト全体で再利用されている 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
    });
4

1 に答える 1

3

あなたの質問を正しく理解していれば、「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);
于 2013-02-01T09:08:02.907 に答える