Как я могу получить содержимое jquery.template из ko.bindingHandler? - PullRequest
Новая
       20

Как я могу получить содержимое jquery.template из ko.bindingHandler?

0 голосов
/ 16 декабря 2011

Существует элемент с привязкой knockout.js (пусть это будет "A"). Содержимое этого элемента генерируется с использованием шаблонов knockout.js / jquery.tmpl. Можно ли получить это содержимое из обработчика привязки, вызываемого для элемента «A»?

Вот простой пример: 

<html>
    <head>      
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
        <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
    </head>
    <body>
        <!-- Some simple tmpls -->
        <script id="wrapperTmpl" type="text/html">
            <div data-bind="showBug:true">                
                <div data-bind="template: 'buggyTmpl'"></div>               
            </div>
        </script>

        <script id="buggyTmpl" type="text/html">
            <div class="buggy">I am out of reach.</div>
        </script>

        <!--
            Knockout won't handle{{tmpl}} calls which are not wrapped in knockout constructions.
        -->
        <div data-bind="template: 'wrapperTmpl'"></div>

        <script>
            <!-- Refers to elements from the child rendered using tmpl -->
            ko.bindingHandlers.showBug = {
                init: function (elem, valueAccessor, allBindingAccessors, model) {
                    var $buggyElem = $(".buggy", elem);
                    console.log("$(elem).html(): ", $(elem).html());        
                    console.log("$('.buggy'): ", $buggyElem);

                }
            };


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

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 16 декабря 2011

Единственная проблема заключается в том, что шаблон визуализируется после выполнения вашей пользовательской привязки. Вы можете справиться с этим, выполнив код инициализации в setTimeout, например: 

ko.bindingHandlers.showBug = {
    init: function (elem, valueAccessor, allBindingAccessors, model) {
        setTimeout(function() {
            var $buggyElem = $(".buggy", elem);
            console.log("$(elem).html(): ", $(elem).html());        
            console.log("$('.buggy'): ", $buggyElem);           
        }, 0);
    }
};

http://jsfiddle.net/rniemeyer/njaeF/

...